使用 $(element).on('change', () => {}) 的替代方法

Question

我有一个问题希望你能帮助我：

我正在使用引导选择选择器，它使用元素的 onchange 事件（我认为）

我需要向 select 元素添加另一个事件处理程序，我做了并且两者都工作正常，问题是我的页面中的每一次特定更改，我使用的表都会重新加载所有数据，当发生这种情况时，表将添加该事件处理程序再次到 select 元素，并会做同样的事情两次（或更多）

所以，在分配事件之前我尝试使用

$('.selectpicker.call').off('change')

但是当我这样做时，我也会删除引导选择选择器的事件处理程序

你们知道我可以使用什么其他技巧来代替 jquery onchange 吗？

谢谢！

Answer 1

您可以使用namespaces for the events 这样您就可以区分您添加的事件而不是其他事件。

让我们举一个非常简单的例子——有一个带有一些默认功能的按钮（点击我），我们可以向它添加更多的事件处理程序。我们还想清除事件处理程序但不破坏默认功能：

//assume some code outside our control
$("#clickme").on("click", () => console.log("Default functionality"));


//our code
$("#set_message").on("click", () =>{
  const message = $("#message").val();
  $("#clickme").on("click", () => console.log(message));
});
$("#clear_message").on("click", () =>{
  $("#clickme").off("click");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input id="message" value="add your message here">
  <button id="set_message">Set message</button>
  <button id="clear_message">Clear message</button>
</div>

<div>
  <button id="clickme">Click me</button>
</div>

这不起作用，因为“清除消息”按钮会删除 所有 事件处理程序 - 是否由其他人添加。

相反，我们可以命名事件。例如click.myEvent 仍然是一个点击事件，但在myEvent 命名空间内。如果我们删除click.myEvent，它只会从该命名空间中删除事件，而其他任何东西都完好无损。所以“清除消息”现在只清除我们的事件处理程序：

//assume some code outside our control
$("#clickme").on("click", () => console.log("Default functionality"));


//our code
$("#set_message").on("click.myEvent", () =>{
  const message = $("#message").val();
  $("#clickme").on("click.myEvent", () => console.log(message));
});
$("#clear_message").on("click.myEvent", () =>{
  $("#clickme").off("click.myEvent");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input id="message" value="add your message here">
  <button id="set_message">Set message</button>
  <button id="clear_message">Clear message</button>
</div>

<div>
  <button id="clickme">Click me</button>
</div>

Answer 2

将此$('.selectpicker.call').on('change',function(){....}) 更改为$('body').on('change'','.selectpicker.call',function(){....}) 并仅加载此函数一次。

它的作用是将函数分配给body，并在.selectpicker.call 元素上触发change 事件时触发。所以即使你的数据不断变化，这个函数也不会。