Question

在我的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>");
}

我尝试过jQuery代码：

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

尝试.click()，$(".tdclass").on("click", ".syncnow", function() {})等，但无济于事。任何人都可以帮我这个吗？

Answer 1

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

＆＃13;

$("body").on("click", ".syncnow", function() {
  console.log('clicked');
} )

$("#inv").append("<input type='submit' value='Sync' class='syncnow' id='sync' />");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inv">
</div>

＆＃13;

Answer 2

使用jQuery()

创建时，您可以将事件附加到元素

$.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");
                                   }
                          }
                    })
    })
  })
})

Answer 3

试试这个

＆＃13;

$(document).on("click", ".syncnow", function() {
  alert('clicked');
} )

$("#inv").append("<input type='submit' value='Sync' class='syncnow' id='sync' />");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inv">
</div>

＆＃13;

Answer 4

我已编写了一个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);

    };


};

用法

$("#inv").appendSyncElements(responseText);

或者

$("#inv").appendSyncElements(responseText, function(syncResult) {
    console.log("This is a custom Complete Method");
});

Answer 5

您可以在点击事件中使用文档：

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

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

Why is jQuery on-click event handler not working properly for dynamic loaded DOM elements?

由于

Answer 6

$("body").on("click",".syncnow", function() {} )

单击事件以动态创建按钮

6 个答案: