Javascript 单击动态创建的按钮的事件

在我的AJAX成功函数中，我写了：

rt = JSON.parse(responseText);
for (i = 0; i < rt.length; i++) {
  $("#inv").append("<tr><td>" + rt[i][0] +
    "</td><td><input type='submit' value='Sync' " +
    "class='syncnow' id='sync"+rt[i][6]+"' /></td></tr>");
}

---

尝试了

.click（）

，

$（“.tdclass”）。在（“click”，“.syncnow”，function（）{}）

等上，但无效。有人能帮我吗？

您不能将事件添加到尚未创建的元素中。您需要将其添加到更高的位置，并在其冒泡时捕获它。 试试这个：

$（“body”）。在（“单击”，“同步”，函数（）上）{
console.log（'clicked'）；
} )
$（“#投资”）。追加（“”）
您不能将事件添加到尚未创建的元素中。您需要将其添加到更高的位置，并在其冒泡时捕获它。
试试这个：


$（“body”）。在（“单击”，“同步”，函数（）上）{
console.log（'clicked'）；
} )
$（“#投资”）。追加（“”）

试试这个


$（document）.on（“单击“，”.syncnow“，函数（））{
警报（“点击”）；
} )
$（“#投资”）。追加（“”）

试试这个


$（document）.on（“单击“，”.syncnow“，函数（））{
警报（“点击”）；
} )
$（“#投资”）。追加（“”）
我编写了一个jquery函数，将
syncbuttons
附加到
invElement

$.fn.appendSyncElements = function(responseText, onComplete) {

    var invElement = $(this);
    var rt = JSON.parse(responseText);

    var base_sync_attrs = [];
    base_sync_attrs.push("type=\"submit\"");
    base_sync_attrs.push("value=\"Sync\"");
    base_sync_attrs.push("class=\"syncnow\"");
    var base_sync_attrs_str = base_sync_attrs.join(' ');

    for(var i = 0; i < rt.length; i++) {

        var crt = rt[i];
        var crt_sync_label = crt[0];
        var crt_sync_attrs = crt[6];

        var sync_attrs = [];
        sync_attrs.push(base_sync_attrs_str);
        sync_attrs.push("id=\"sync_" + String(i) + "\"");
        sync_attrs.push("data-sync_index=\"" + String(i) + "\"");
        sync_attrs.push(crt_sync_attrs);
        var sync_attrs_str = sync_attrs.join(' ');

        var syncElement = $('<input ' + sync_attrs_str + ' />');

        syncElement.click(function(e) {
            var syncBtn = $(this);
            console.log("the syncBtn was clicked at index " + String(syncBtn.data('sync_index'));
            var syncEvent = {
                'event' : e,
                'button' : syncBtn,
                'fullresponse': crt,
            };
            if(typeof(onComplete) === 'function') {
                onComplete(syncEvent)
            };
        });

        var tableRowElement = $('<tr><td class="synclabel" ></td><td class="syncinput" ></td></tr>');
        tableRowElement.find("td.synclabel").html(crt_sync_label);
        tableRowElement.find("td.syncinput").append(syncElement);

        invElement.append(tableRowElement);

    };


};

或

我编写了一个jquery函数，将
syncbuttons
附加到
invElement

$.fn.appendSyncElements = function(responseText, onComplete) {

    var invElement = $(this);
    var rt = JSON.parse(responseText);

    var base_sync_attrs = [];
    base_sync_attrs.push("type=\"submit\"");
    base_sync_attrs.push("value=\"Sync\"");
    base_sync_attrs.push("class=\"syncnow\"");
    var base_sync_attrs_str = base_sync_attrs.join(' ');

    for(var i = 0; i < rt.length; i++) {

        var crt = rt[i];
        var crt_sync_label = crt[0];
        var crt_sync_attrs = crt[6];

        var sync_attrs = [];
        sync_attrs.push(base_sync_attrs_str);
        sync_attrs.push("id=\"sync_" + String(i) + "\"");
        sync_attrs.push("data-sync_index=\"" + String(i) + "\"");
        sync_attrs.push(crt_sync_attrs);
        var sync_attrs_str = sync_attrs.join(' ');

        var syncElement = $('<input ' + sync_attrs_str + ' />');

        syncElement.click(function(e) {
            var syncBtn = $(this);
            console.log("the syncBtn was clicked at index " + String(syncBtn.data('sync_index'));
            var syncEvent = {
                'event' : e,
                'button' : syncBtn,
                'fullresponse': crt,
            };
            if(typeof(onComplete) === 'function') {
                onComplete(syncEvent)
            };
        });

        var tableRowElement = $('<tr><td class="synclabel" ></td><td class="syncinput" ></td></tr>');
        tableRowElement.find("td.synclabel").html(crt_sync_label);
        tableRowElement.find("td.syncinput").append(syncElement);

        invElement.append(tableRowElement);

    };


};

或

使用
jQuery（）创建时，可以将事件附加到元素

$。每个（rt，函数（i，值）{
$("", {
附件：“#库存”，
html:$（“”{
html:值[0]，
附加：$（“”）{
键入：“提交”，
值：“同步”，
“类”：“同步现在”，
id:值[6]，
关于：{
单击：功能（事件）{
控制台日志（“单击”）；
}
}
})
})
})
})
您可以在使用
jQuery（）创建时将事件附加到元素。

$。每个（rt，函数（i，值）{
$("", {
附件：“#库存”，
html:$（“”{
html:值[0]，
附加：$（“”）{
键入：“提交”，
值：“同步”，
“类”：“同步现在”，
id:值[6]，
关于：{
单击：功能（事件）{
控制台日志（“单击”）；
}
}
})
})
})
})
您可以在单击事件时使用文档：

$(document).on("click",".syncnow",function() {
   alert("Working");
});

您也可以在这里查看我的答案：


谢谢
您可以在单击事件时使用文档：

$(document).on("click",".syncnow",function() {
   alert("Working");
});

您也可以在这里查看我的答案：


谢谢
实际上这很有帮助：$（“body”）。在（“click”、“.syncnow”，function（）{}）Read Jquery上，你在浏览器控制台中有错误吗？实际上这很有帮助：$（“body”）。在（“click”、“.syncnow”，function（）{}）Read Jquery上，你在浏览器控制台中有错误吗？这对我来说也不是很好，
console log
get在我点击按钮时运行这对我来说也不太好，
console log
get在我点击按钮时运行这段代码可能会解决这个问题，但它确实有助于提高你文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！我只是从之前对这个问题发表评论的人那里复制了答案，然后删除了评论。这就是为什么我没有发布解释。虽然这个代码片段可以解决这个问题，但确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！我只是从之前对这个问题发表评论的人那里复制了答案，然后删除了评论。这就是为什么我没有发布解释
$("#inv").appendSyncElements(responseText, function(syncResult) {
    console.log("This is a custom Complete Method");
});

$.each(rt, function(i, value) {
  $("<tr>", {
    appendTo: "#inv",
    html: $("<td>", {
            html: value[0],
            append: $("<input>", {
                      type: "submit",
                      value: "Sync",
                      "class": "syncnow",
                      id: value[6],
                      on: {
                            click: function(event) {
                                     console.log("clicked");
                                   }
                          }
                    })
    })
  })
})

$(document).on("click",".syncnow",function() {
   alert("Working");
});