Question

我正在点击按钮时注入一些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>

感谢您的帮助！

Answer 1

在submitButton.Click（...）的范围内创建一个布尔值。检查submitButton.Click（...）中的布尔值。对该boolean的引用将保存在与submitButton.Click（...）相关联的函数中，作为该函数闭包的一部分。

更漂亮，创建一个装饰器函数来保存其闭包中的布尔值，这样就不会用布尔值污染父命名空间：

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

Answer 2

您可以使用.wrap()

将插入的html包装在具有特定ID的div中

然后在点击时执行以下操作：

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

或将你的每一个都放在一个if例如：

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

Answer 3

Initaialize任何全局变量说var i = 0;，并在执行插入html的函数中，将其放在if(i<1)内，如果执行i++则放在里面。希望这会有所帮助。

Answer 4

使用.one()

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

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

Answer 5

你可以查看大小

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

单击按钮时仅添加一次html

5 个答案: