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使用按钮进行多次点击事件

1 个答案: