Question

我正在开发一个jquery模块，用于添加删除编辑视图等。我的问题是当页面加载完成时，填充一个项目列表。选择项目后，通过jquery和html加载此项目的子项目，附加。但在这个桌子上事件没有被激发。 Jquery Live已不再可用。相反＆＃34; On＆＃34;不管用。

我试过了：

$(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

你必须做这样的事情才能使用“on”方法。

$("table").on("click", myModule.el.detailbutton, myModule.itemDetails());

更新：注意到，你必须在第二个参数中使用选择器而不是jQuery对象。

所以$("table").on("click", ".item-detail", myModule.itemDetails());

Answer 2

你需要代表团

$("selector on which item is added").on("click", "new item selector", function(){    

});

ON和Delegate

Answer 3

你可以试试以下：

  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();
            });
   },

Answer 4

使用on的方法正是您所需要的，但在构造元素对象时应该更加小心

el: {
    listbutton: '#list-button',
    listcontainer: '#list',
    detailbutton: ".item-detail",
    deletebutton: ".item-delete",
    editbutton: ".item-edit"
},

并像这样使用

init: function () {
    $(myModule.el.listbutton).on("click", myModule.getMainData);
},

你做的是

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

类似于哪个错误

TableLinks: function () {
    $(document).on('click', $(".item-detail"), function () { myModule.itemDetails(); });
    ....
},

工作fiddle

将JQuery事件绑定到页面加载后通过jquery创建的html

4 个答案:

ON和Delegate