Question

我有一个表单，其中某些问题具有与之关联的特殊css类。现在在document.ready，我有$('.cssclassname').on，我通过ajax调用得到一些数据，并在该类行中显示返回的数据。

返回的其中一个组件是一个按钮，单击该按钮会显示jQuery ModalPopup并在我的$('.cssclassname').on中获取数据，我附加了我的ModalPopup事件，以便ModalPopup通过该方式正常工作按钮单击。

现在我面临的问题是，有时候，我的页面上可以有3-4个按钮，每次点击1个按钮，打开modalpopup的代码都会运行x次（其中x是按钮数）。我认为问题是因为modalpopup具有相同的类，并且由于x个按钮数量，我附加相同的事件x次。

他们是否有办法解决这个问题，我每次只加载一次特定的事件函数。

我对解释这个问题感到有点困惑，但让我知道任何人都可以帮助我，或者需要更多的澄清。

由于

Answer 1

据我了解，您有两种选择：

取消绑定事件，然后使用.off()（奇怪的）
使用.on（）代理：

$（document）.on（“click”，“。className”，函数（）{}）;

Answer 2

最简单的方法是将类添加到具有此行为的所有按钮并一次性绑定它们。

 <button id='modalTrigger1' class='modelPopupTrigger'>Click</button>
 <button id='modalTrigger2' class='modelPopupTrigger'>Click</button>
 <button id='modalTrigger3' class='modelPopupTrigger'>Click</button>

然后在JS

 $(function(){
      $(document).on("click", "button.modelPopupTrigger", function(){..handler..});
 });

或者你可以将函数赋值给变量重用函数进行绑定

 $(function(){
      var modelHandler = function(){... handler...};

      $("#button1").on("click", modelHandler);
      $("#button2").on("click", modelHandler);
 });

jQuery：将同一事件附加到同一页面上的多个控件

2 个答案: