Question

我有一些表格数据，一个产品清单。

id | name | description | options
1  | foo  | bar         | [delete]

现在通常我只是在删除按钮上设置一个类，如.delete-item并执行

$('.delete-item').click(function(e) {
     e.preventDefault();
     // do something/ajax etc
});

但有了这个，我将添加一些其他功能，如内联编辑描述。现在我可以绑定另一个函数，比如我的删除函数，但是我想知道是否有更多jquery方法这样做，因为我可能会在以后添加产品价格和数量以及自动计算总数，它可能会变得非常毛茸茸。

可能是插件，还是某种对象？

$('table').productEditor();

这有意义吗？我有什么东西可以读更多关于这类事情吗？

Answer 1

您可以编写一个小jQuery插件来执行此操作：

//tableEditor.js
;(function($){
    $.fn.tableEditor = function(settings) {
        var defaults = {stuff: 1, etc: true};
        settings = $.extend(defaults, settings || {});

        //using "on" so we wouldn't have to use multiple handlers for each link
        this.on('click', '.delete-item', function() { 
            e.preventDefault();
            var this_row = $(this).closest('tr');
            // do stuff
        });

        this.on('click', '.edit-item', function() { 
            e.preventDefault();
            var this_row = $(this).closest('tr');
            // do stuff
        });

        return this;
    };
})(jQuery);

然后称之为：

//main.js
$(function() { 
    $('#table').tableEditor({etc: false}); 
});

Answer 2

你可以这样做：

修改：对于动态添加的行，请在其委派的表单中使用.on()：

$("#myTable").on("click", "td", function (event) {
    var thisID = $(this).siblings("td").eq(0).text(); // get ID of clicked row
    switch (event.target.className) {
        case "delete":
            //delete              
            alert("delete this ID = " + thisID);
            break;
        case "edit":
            // edit
            alert("edit this ID = " + thisID);
            break;
        default:
            return false;
    }
}); // on click

您仍然需要为每个可点击的td

添加类

请参阅新 JSFIDDLE ，其中包含添加行的方法。

注意：.on()需要jQuery v1.7 +

使用jquery将对象绑定到行

2 个答案: