javascript - 将 JQuery 事件绑定(bind)到通过 jquery 加载页面后创建的 html

Question

我正在开发一个用于添加删除编辑 View 等的 jquery 模块。我的问题是当页面加载完成时，会填充一个项目列表。选择一个项目后，该项目的子项目通过 jquery 和 html 构建加载，附加。但是在这个表上事件没有被触发。 Jquery Live 不再可用。相反，“开”不起作用。

我试过了:

$(document).on('click', selector , function () { foo(); });

但是当一个按钮被点击时它也会触发其他按钮。

我的代码如下。我有一个工作代码，除了由 jquery 加载的表上的链接。

var myModule = {
    el: {
        listbutton: $('#list-button'),
        listcontainer: $('#list'),
        detailbutton: $(".item-detail"),
        deletebutton: $(".item-delete"),
        editbutton: $(".item-edit")
    },  
     init: function() {
     ...
     myModule.el.listbutton.on("click",myModule.getMainData);
    },

    getMainData: function() {
        ...
        success: function(data) {
                myModule.BuildTable(data.Value.DataList);
        }
        ...
    },
    BuildTable: function (hws) {
        var c = "";
        c += "<table>";
        $.each(hws, function() {
            c +=
                '<tr>' +
                    '<td>' + this.Title + '</td>' +
                    '<td><a href="#" class="item-detail"></a></td>' +
                    '<td><a href="#" class="item-edit"></a></td>' +
                    '<td><a href="#" class="item-delete"></a></td>' +
                '<tr>';
        });
        c += "</table>";
        myModule.el.listcontainer.empty().append(c);
        myModule.TableLinks();
    },

    itemDetails: function () {
        alert("Detail clicked");
    },
    itemDelete: function () {
        alert("Delete clicked");
    },
    itemEdit: function () {
        alert("Edit clicked");
    },

    TableLinks: function () {
        $(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
        $(document).on('click', myModule.el.deletebutton, function () { myModule.itemDelete(); });
        $(document).on('click', myModule.el.editbutton, function () { myModule.itemEdit(); });
    },

};

myModule.init();

Answer 1

你可以尝试以下操作吗:

  TableLinks: function () {
    $(document).on('click', 
            ".item-detail", 
            function (ev) { 
               myModule.itemDetails(); 
               ev.stopPropagation();
            }
    );
    $(document).on('click',
           ".item-delete",
           function (ev) {
               myModule.itemDelete(); 
               ev.stopPropagation();
           });
    $(document).on('click',
            ".item-edit",
            function (ev) { 
                   myModule.itemEdit(); 
                   ev.stopPropagation();
            });
   },