javascript - jQuery 从函数内部取消委托(delegate)

Question

如何取消委托(delegate) #submit 点击事件？

$(document).ready(function(){
            $(".agent img").click(function(){
                $(".agent-form").remove();
                var agentid = $(this).attr("alt"),
                    response = "<form method='post' action='' class='agent-form'><textarea placeholder='Your Comment' name='comment' id='comment'></textarea><input type='button' value='submit' id='submit' /></form>";
                $(response).hide().appendTo(this.parentNode).fadeIn();
                $(".agent").delegate("#submit","click",function(){
                    var message = $("#comment").val();
                    message = escape(message);
                    var dataString = "agent="+agentid+"&message="+message;
                    $.ajax({
                        type: "POST",
                        url: "includes/newcomment.asp",
                        data: dataString,
                        success: function(){
                            console.log(dataString);
                        }
                    });
                });
            });
        });

我想取消委托(delegate)在之前的 .agent img 点击中创建的所有 #submit 点击事件。问题是，如果用户单击代理 img，然后决定单击另一个 img，ajax 会提交到不同的数据字符串。

Answer 1

根据jQuery doc for .delegate() ，您可以使用.undelegate()删除事件处理程序。

您没有向我们展示您的 HTML，但这听起来更像是您应该只拥有一个始终存在的委托(delegate)事件处理程序，而不是创建一个、删除一个、创建另一个等等...您可以将 agentid 存储在创建表单元素时的表单元素，然后在提交处理程序上检索它，如下所示。

 $(document).ready(function(){

        $(document).delegate("#submit", "click", function() {
            var message = $("#comment").val();
            message = escape(message);
            // get agentid for this form
            var agentid = $(this).closest("form").data("agentid");
            var dataString = "agent="+agentid+"&message="+message;
            $.ajax({
                type: "POST",
                url: "includes/newcomment.asp",
                data: dataString,
                success: function(){
                    console.log(dataString);
                }
            });
        });

        $(".agent img").click(function(){
            $(".agent-form").remove();
            var agentid = $(this).attr("alt"),
            // build form HTML (embed agentid into it for later retrieval)
            var response = "<form method='post' action='' class='agent-form' data-agentid='" + agendid + "'><textarea placeholder='Your Comment' name='comment' id='comment'></textarea><input type='button' value='submit' id='submit' /></form>";
            $(response).hide().appendTo(this.parentNode).fadeIn();
        });
    });