Question

我的问题与此问题非常相似：jQuery click() still being triggered after .clickable class is removed

我有一个无序列表和两个不同的函数，我想根据列表项的类来触发。在我的应用程序中，我正在使用Glyphicons，以便当用户单击图标时，我调用AJAX进程并将图标更改为“撤消”。然后我想将另一个处理程序附加到该撤销类，并在单击该图标时调用另一个AJAX函数。这些是报告中的行，这是值得的。

这是一个简单的例子：如果用户第一次单击该链接，我想更改该类并将新事件绑定到该类。我（慢慢地）知道事件与元素绑定而不是类，所以我不确定如何实现这一点。

这是我的小提琴：http://jsfiddle.net/jkolden/UFcm2/4/

我的HTML：

<p>After each click, I want to change the class for the clicked li and attach a new    event handler to that new class</p>
<ul>
    <li class='Action1'>Item A - click me</li>
    <li class='Action1'>Item B - click me</li>
    <li class='Action1'>Item C - click me</li>
</ul>

JavaScript的：

$('.Action1').click(function() {
    $(this).removeClass('Action1');
    $(this).addClass('Action2');
    var text = $(this).text().split('-');
    alert('Action 1 was fired and the class of ' + text[0]  + 'should now be Action2');
});

$('.Action2').click(function() {
    $(this).removeClass('Action2');
    $(this).addClass('Action1');
    alert('Action 2 was fired');
});

这可能吗？如果这是一个重复的问题，任何线索都会受到高度赞赏和道歉。

Answer 1

您应该/可以使用event delegation执行此操作，因为您正在动态删除/添加类。

尝试，

$(document).on('click','.Action1', function() {

和

$(document).on('click','.Action2', function() {

添加类onclick，然后将不同的处理程序附加到该类

1 个答案:

DEMO