Question

我有一系列用于点击事件的匿名jQuery / javascript函数，这些函数必须作为委托函数动态添加到ajax命令返回的内容中，并且我发现我复制了大量难以管理的代码。

例如，在下面的代码中是一个删除按钮，当首次加载页面时，该按钮附加到所有删除按钮。还有一些代码将项添加到数据库，然后向DOM添加一个包含删除按钮的元素。删除事件处理函数需要添加到这个新按钮，因为它在页面首次加载时不存在，这是通过使用委托函数完成的 - 这非常有效但是我不得不复制粘贴很多实现代理的代码，它使代码难以管理。是否有任何方法可以添加委托功能而无需将其粘贴到其中？

我已经尝试为删除创建一个单独的函数，并以与在C中相同的方式调用它，但无法使其工作。我还考虑将代码分解为更小的块，然后使用php编写javascript，但这似乎是一个相当复杂的事情，我觉得应该很简单。还有另一种方式吗？

任何帮助都会很棒，如果这是一个简单的修复就道歉

$(document).ready(function(){   
    $("a.delete").click(function(){
    //do stuff
    $.ajax({
        type: "GET",
        url: url,
        success: function(msg){
           //do more stuff
        }//end of success function
        });//end of ajax*/
    });//end of delete button

        $("button#addItem").click(function(){
        //do stuff
        $.ajax({
            type: "GET",
            url: url,
            dataType: "json",
            success: function(msg){
                //do stuff

                //form the id for the delete button
                var buttonID = "#delete" + msg.id;

                //need to attach the delete function to the new button to make sure the function is there
                $("body").delegate(buttonID, "click", function(){
                    //do stuff
                    $.ajax({
                        type: "GET",
                        url: url,
                        success: function(msg){
                            //do stuff
                        }//end of success function
                    });//end of ajax*/
                });//end of delegate function attaching to the delete button
            }//end of success function
        });//end of ajax
    });//end of add button
});//final close

Answer 1

你可以做几件事：

命名函数

没有任何理由在多个地方复制完全相同的功能。相反，在两个地方为函数命名并引用：

$("a.delete").click(handleDelete);

// ...

$.ajax({
    // ...
    success: function(...) {
        $(some_selector).click(handleDelete);
    }
});

function handleDelete() {
    // ...do the deletion
}

和/或使用事件委托

但在许多情况下，您还可以使用事件委派来连接一个处理程序，即使对于尚未创建的元素，也可以使用live或（如果可能）delegate：

$("a.delete").live("click", handleDelete);

或者理想情况下，将其挂钩在包含所有这些删除链接的容器上：

$("selector_for_container").delegate("a.delete", "click", handleDelete);

告诉jQuery挂钩文档上的“click”事件，然后当点击发生时查看点击的实际元素是否与选择器“a.delete”匹配，如果是，则触发处理程序。

从jQuery 1.7开始，您使用on而不是live：

$(document.body).on("click", "a.delete", handleDelete);

或者理想情况下，如果有一些比文档正文更具体的容器：

$("selector_for_container").on("click", "a.delete", handleDelete);

（请注意，参数的顺序与delegate不同。）

Answer 2

将所有删除按钮设为同一个类，然后在所有这些AJAX调用之外放置一个委托方法。

$('body').delegate('.deleteButton', 'click', function(){
    var id = this.id;
    // Do stuff...
});

如何在没有复制粘贴代码的情况下添加jQuery委托函数

2 个答案:

命名函数

和/或使用事件委托