Question

我正在将此代码用于我的页面。当我单击带有.process_record类的按钮时，它会给我一个警告，但如果我再次点击同一个按钮，它会一次给我2个警报。我不知道为什么它的表现如此。

$(".body .content").on("click", ".process_record", function(e){

        alert("clicked");
        var url = $(this).attr("data-url");
        $.post(url, function(data){
            $(".body .content").html(data);
        },"html");
    })

Answer 1

http://jsfiddle.net/MaxPRafferty/z9VFA/

这适合我在上面的小提琴。 html设置为：

<div class="body">
    <div class="content">
        <input type="button" class="process_record" />
    </div>
</div>

我的猜测是你多次设置处理程序，可能是在另一个点击事件中。从您的注释中，您可能正在从ajax加载它时从您的其他页面注入的脚本标记再次执行绑定。您可以通过将脚本标记移动到其他页面上的外部文件来解决此问题，然后当您注入它时，请确保仅加载正文标记，而不是头部或脚本。

代码解决方案是让您的事件解除绑定并在点击时自行重新绑定，以确保每个事件只有一个处理程序：

http://jsfiddle.net/MaxPRafferty/B5UPB/

var clickAction = function(){
    alert("clicked");
    $(".body .content").unbind("click");
    setClick($(".body .content"),clickAction);
}

var setClick = function(target,action){
    target.on("click", ".process_record",action)
}

setClick($(".body .content"),clickAction);

请记住，这将解除$(".body .content")中的所有事件的绑定，因此如果您只想卸载指定的事件，请将解除绑定行更改为$(".body .content").unbind("click",clickAction);

jQuery .on多次触发

1 个答案: