jquery 添加html只一次在按钮点击

nfs0ujit 于 2022-12-26 发布在 jQuery

关注(0)|答案(6)|浏览(211)

我正在注入一些html，一个span标签来显示一个错误信息，在一个按钮点击的时候。我只想添加html一次。每次按钮被点击它都会再次添加html。我怎么能只添加一次html呢？
下面是代码：

<script type="text/javascript">
    var j$ = jQuery.noConflict();

    j$(document).ready(function() {
        var submitButton = j$('[id$=btnSubmit]');
        var emailButton = j$('[id$=btnEmail]');
        var shippingMethod = j$('[id$=shippingMethod]');
        var alternateAddress = j$('[id$=chkbxAlternateAddress]');
        var alternateStreet = j$('[id$=alternateaddress]');
        var alternateCity = j$('[id$=alternatecity]');
        var alternateState = j$('[id$=alternatestate]');
        var alternateZip = j$('[id$=alternatezip]');
        submitButton.click(function(e){
            j$('[id$=documentQuantity]').each(function(index){
                if(j$(this).text() == '0') {
                    j$("#contentQtyError").css({"display":"inline"});
                    j$(this).parent().parent().css({"background-color":"#FFFFCC"});
                    e.preventDefault();
                }
            });             
            if(shippingMethod.val() == '') {
                shippingMethod.after("<span class='shippingMethodErrorMsg'>Error: A Shipping Method is Required</span>");
                e.preventDefault();
            }
            else {
                j$(".shippingMethodErrorMsg").remove();
            }
            if(alternateAddress.attr("checked")) {
                alternateStreet.after("<span class='alternateStreetErrorMsg'>Error: A Street Address is Required</span>");
                alternateCity.after("<span class='alternateCityErrorMsg'>Error: A City is Required</span>");
                alternateState.after("<span class='alternateStateErrorMsg'>Error: A State is Required</span>");
                alternateZip.after("<span class='alternateZipErrorMsg'>Error: A Zip is Required</span>");
                e.preventDefault();
            }
            else {
                j$(".alternateStreetErrorMsg").remove();
                j$(".alternateCityErrorMsg").remove();
                j$(".alternateStateErrorMsg").remove();
                j$(".alternateZipErrorMsg").remove();
            }
        });
        shippingMethod.change(function(){
            if(shippingMethod.val() == 'Email') {
                emailButton.css({"display":""});
                submitButton.css({"display":"none"});
                j$('#containerAltAddressToggle').css({"display":"none"});
                j$('[id$=chkbxAlternateAddress]').attr('checked',false);
                j$('[id$=alternateAddressPanel]').css({"display":"none"});
                j$('#containerCustomKitToggle').css({"display":"none"});
                j$('[id$=chkbxCustomKit]').attr('checked',false);
                j$('[id$=customKitPanel]').css({"display":"none"});             
                j$('#containerPersonalNoteToggle').css({"display":"none"});
                j$('[id$=chkbxPersonalNote]').attr('checked',false);
                j$('[id$=personalNotePanel]').css({"display":"none"});
                j$('#containerFollowUpTaskToggle').css({"display":"none"});
                j$('[id$=chkbxScheduleTask]').attr('checked',false);
                j$('#recurrence').css({"display":"none"});
                j$('[id$=commentsBlock]').css({"display":"none"});
            }
            else {
                emailButton.css({"display":"none"});
                submitButton.css({"display":""});
                j$('#containerAltAddressToggle').css({"display":""});
                j$('#containerCustomKitToggle').css({"display":""});                
                j$('#containerPersonalNoteToggle').css({"display":""});
                j$('#containerFollowUpTaskToggle').css({"display":""}); 
                j$('[id$=nextTask]').val("");   
                j$('[id$=commentsBlock]').css({"display":""});      
            }                           
        });
        alternateAddress.change(function() {
            if(alternateAddress.attr("checked") != "checked") {
                j$(".alternateStreetErrorMsg").remove();
                j$(".alternateCityErrorMsg").remove();
                j$(".alternateStateErrorMsg").remove();
                j$(".alternateZipErrorMsg").remove();
            }
        });
    });  
</script>

谢谢你的帮助!

jquery

来源：https://stackoverflow.com/questions/22840016/add-html-only-once-on-button-click

6条答案

按热度按时间

t1rydlwq1#

在submitButton的作用域中创建一个布尔值。单击（...）。检查submitButton中的布尔值。单击（...）。对该布尔值的引用将保存在与submitButton关联的函数中。单击（...）作为该函数闭包的一部分。
更妙的是，创建一个装饰器函数来保存闭包中的布尔值，这样就不会用布尔值污染父命名空间：

submitButton.Click(
(function() { 
var notDoneYet = true; 
return function(){/** function to insert the html, checking notDoneYet**/}
})()
);

赞(0）回复(0）举报 2022-12-26

bvpmtnay2#

您可以使用.wrap()将插入的html Package 在具有特定id的div中
然后点击鼠标，做这样的事情：

if ($('#idofwrap').length == 0) {
    //wrap content and insert here
}

或者把你的每个after放在if中，例如：

if ($('.alternateStreetErrorMsg').length == 0) {
    alternateStreet.after("<span class='alternateStreetErrorMsg'>Error: A Street Address is Required</span>");
}

赞(0）回复(0）举报 2022-12-26

hi3rlvi23#

初始化任何全局变量，比如var i = 0;，在函数中插入html，把它放在if(i<1)和if do i++中。希望这能有所帮助。

赞(0）回复(0）举报 2022-12-26

k10s72fa4#

使用.one()

$("elem").one("click", function() {
    //only runs once!
});

参考：http://api.jquery.com/one/

赞(0）回复(0）举报 2022-12-26

djp7away5#

您可以像这样检查尺寸

if ($('.classofspan').size() == 0) {
//add span
}

赞(0）回复(0）举报 2022-12-26

lvmkulzt6#

赞(0）回复(0）举报 2022-12-26

我来回答

jquery 添加html只一次在按钮点击

6条答案

相关问题

热门标签

最新问答