Question

我创建了一个click事件，它更改了按钮的标识符。我在同一个按钮上创建了第二次单击事件，但这次使用了新的id。当我第二次点击按钮时。我总是有旧id的第一个行为。以下是更好地说明此示例的代码。我们的想法是使用相同的按钮

执行两种不同的行为

$('#button').on('click',function () {
    $(this).attr('id','buttonBis');
});

$('#buttonBis').on('click',function () {
    alert('here');
});

Answer 1

如果您要动态更改标识符，则需要使用委派的事件处理程序：

$(document).on('click', '#button', function() {
  $(this).attr('id', 'buttonBis');
});

$(document).on('click', '#buttonBis', function() {
  alert('here');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">Click me twice to see the alert()</button>

请注意，动态更改id属性不是一个好主意，应该尽可能避免。我建议添加/删除类是一个更好的选择。

Answer 2

创建函数以将事件分配给新按钮ID并通过用其colne替换dom节点来删除附加（防止重复）事件，

＆＃13;

$('#button').on('click',function () {
    $(this).attr('id','buttonBis');
    //clone the node then reissign to the same node
    // which removes the previous attached events
    var self = this.cloneNode(true);
    $(this).replaceWith(self);
    newevent();
});


var newevent = function() {
	 $('#buttonBis').on('click',function () {
      alert('here');
   });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" >Click Me twice </button>

＆＃13;

如何使用相同的按钮实现两种不同的行为

2 个答案: