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

I created a click event, which changes the identifier of a button. I created a second click event on the same button but this time with the new id. When I click the button, a second time. I always have the first behavior with the old id. Here is the code to better illustrate this example. The idea is to do two different behaviors with the same button

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

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

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

2 个解决方案

#1

If you're changing the identifiers dynamically then you will need to use delegated event handlers:

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

$(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>

Note that dynamically changing id attributes is not considered a very good idea, and should avoided where possible. I'd suggest adding/removing classes would be a much better alternative.

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

#2

Create function to assign event to new button id and remove attached (prevent duplication of) event by replacing the dom node by its colne ,

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

$('#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');
   });
}

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

#1