javascript - Jquery 事件并不总是被触发

Question

我有一个不会每次都触发的 Jquery 事件：

http://jsfiddle.net/LphjL/

我的代码：

thisWebsite = websiteInitialization ();

function websiteInitialization () {
    companyName = "name";
    var thisWebsite = new websiteConstructor(companyName);
    return thisWebsite;
}

function websiteConstructor(companyName) {
  this.companyName=companyName;
}

function ajaxUpdateDB(websiteElement, value) {
    return $.post('/echo/html/',{html: "<p>Text echoed back to request</p>",delay: 3}
                ,function(a){}
                ,"json"
        );    
}

function updateDatabase(websiteElement, value) {
    var promise = ajaxUpdateDB(websiteElement, value);
    promise.complete(function () {
        thisWebsite[websiteElement] = value;
    });
}


$(document).ready(function() {

    $(".websiteElement").change(function() {
        updateDatabase( $(this).attr('id'), $(this).val() );
    });

    $("#infos").click(function() {
        htmlCode =    "<input class='websiteElement' id='companyName' type='text' value='"+thisWebsite.companyName+"'>";
        $("#panel-content").html(htmlCode);
    });

    $("#homepage").click(function() {
        htmlCode = "homepage";
        $("#panel-content").html(htmlCode);
    });

});
​

正如您在 jsfiddle 中看到的那样，第一次更新输入字段时会触发 Ajax，但是：

如果您单击“主页”，然后单击“通用信息”并再次更新输入字段，这次不会触发 Ajax：$(".websiteElement").change第二次未调用事件。

Answer 1

您需要使用事件委托来绑定事件，或者在替换元素后重新绑定事件。以下是事件委托选项：

$("#panel-content").on("change",".websiteElement",function() {
    updateDatabase( $(this).attr('id'), $(this).val() );
});

如果事件直接绑定在元素上，当元素被替换/移除时，事件会丢失。