Question

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

我的代码：

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，但是：

如果您点击＆＃39;主页＆＃39;，请点击“通用信息”。并且这次不会触发Ajax时再次更新输入字段：第二次不调用$(".websiteElement").change事件。

Answer 1

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

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

如果事件直接绑定在元素上，则在替换/删除元素时，事件将会丢失。

Jquery事件并不总是被触发

1 个答案: