Question

我的HTML中具有以下结构：

@if(some_condition)
<div id="SomeDiv">
  @include('first_view')
</div>

@elseif(some_other_condition)
<div id="SomeDiv">
  @include('second_view')
</div>
@endif

而且，我有一个点击事件，当单击'first_view'或'second_view'内的'td'时，应该触发该事件：

$('#SomeDiv").on("click",'td',function(){
  console.log("Hello");
});

我具有需要在'first_view'和'second_view'之间切换的功能。我使用ajax将视图加载为：

$('#switchBtn').on('click',function(){
   var _url = $(this).data('url');
   $.ajax({
      type:'GET',
      url:_url,
      success:function(response){
       /* Response contains the views as html string */
       response = JSON.parse(response);
       $('#SomeDiv').empty();
       $('#SomeDiv').html(response['response']);
      }
    });
});

问题：

Clicked事件在第一次加载时被触发两次。即“ Hello”被打印两次。而且，每次我在视图之间切换并触发click事件时，都会比上一次触发一次。

即第一次加载时，“ Hello”被打印两次，切换视图后，“ Hello”被打印三次，依此类推。

有人可以告诉我我在做什么错吗？

Answer 1

我看到了几个问题：

您的HTML使用if输出了两种不同的东西，但没有使用else使其互斥。它们可能同时发生。
每次渲染HTML时都会执行注册click事件的代码（可能是因为它位于SomeDiv内），因此当您执行$('#SomeDiv').html(response['response']);时，它将渲染HTML并执行重新注册。意味着您有3个全局侦听器->打印3次。

要解决此问题，您需要将代码移至click之外注册SomeDiv事件（我建议将它们放入something.js并放在页面末尾）

Answer 2

您需要调用off()来删除以前附加的处理程序。不带参数的调用.off()会删除所有附加到元素的处理程序。

所以在您的情况下：

$("#SomeDiv").off().on("click","td",function(){
  console.log("Hello");
});

点击事件已多次触发

2 个答案: