如何用同一个按钮实现两种不同的行为

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

1个按钮创建函数到事件分配给新的按钮编号，并移除附接（防止重复）事件通过其科恩替换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() { 
 
\t $('#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>