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

Question

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

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

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

因此，在分配事件之前我尝试使用

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

但是当我这样做时，我也删除了 bootstrap select选择器的事件处理程序

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

谢谢！

Answer 1

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

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

Answer 2

您可以使用 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>

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

Alternative way to use $(element).on('change', () => {})

javascript

bootstrap-selectpicker