Jquery 对多个点击事件使用按钮

Question

我希望能够单击一个按钮来启用文本 input 进行编辑，然后在完成后再次单击它，这将触发 ajax 以保存它。我正在阅读 on() 和 off() 的文档，但无法使其正常工作。这是代码：

 <div>
   <button>Click Me!</button>  
 </div>

$('button').click(function(){
   //add a class as a handle for the save event later
   $(this).addClass('test').text('Click to Save');
   //remove the click event from the button
   $(this).off('click');
   alert("This event is off!");
   //do other stuff like disable the input (no help needed)
});
$("div").on("click","button.test" function(){
   alert("This event works!");
   //do ajax stuff here (no help needed)

   //turn this event off and turn the other back on??
});

Answer 1

这是因为$(this).off('click')将从元素中移除所有个点击事件。

有几种方法可以解决此问题，但我建议将事件放在 namespace 中，以便您可以删除所需的事件。

例如，.off('click.one') 将删除附加有 .on('click.one') 的事件。

$('button').on('click.toggleInput', toggleInput);
$("div").on("click.saveForm", "button.test", saveForm);

function toggleInput () {
  $(this).addClass('test').text('Click to Save');
  $(this).off('click.toggleInput');

  // Do other stuff
}

function saveForm () {
  $(this).removeClass('test');
  $(this).on('click.toggleInput', toggleInput);

  // Do other stuff
}

根据您想要实现的目标，您还可以使用 .one() method 来附加一个只触发一次的事件。

Jquery 对多个点击事件使用按钮

Jquery use button for multiple click events

jquery

javascript-events