使用jQuery重新注册事件

Question

我在一些项目中使用jQuery添加新元素时，遇到了一个有点繁琐的问题。

请考虑以下内容：

$('span.claim').click(function() {
    $(this).parent().html('<span class="unclaim">Unclaim</span>'):
});

$('span.unclaim').click(function() {
    $(this).parent().html('<span class="claim">Claim</span>'):
});

以下是相关标记...

而以下标记...

<ul>
    <li><span class="claim">Claim</span></li>
    <li><span class="unclaim">Unclaim</span></li>
    <li><span class="claim">Claim</span></li>
    <li><span class="unclaim">Unclaim</span></li>
</ul>

很遗憾，在触发初始事件后，没有处理任何后续事件。

我意识到我可以完全重构并使用.bind()函数，但由于我的项目的复杂性，这并不是非常可行的。

在创建新元素后，如何重新绑定事件而不放弃我的匿名函数，或者是否可能？

- Skudd

---

有没有创建新的HTML元素而不是在单击时更改文本和类名的原因？ - David Hellsing

除了创建元素之外，还有很多其他的事情正在发生。这只是一个简单的示例，旨在说明正在发生的事情，而不是字面意义上的。 - Skudd

Answer 1

你可能想要查看jQuery的实时事件: http://docs.jquery.com/Events/live 更新： 如上述页面所提到的： 自jQuery 1.7起，.live()方法已被弃用。使用.on()来附加事件处理程序。旧版本的jQuery用户应优先使用.delegate()而不是.live()。

- Paddy

---

+1 - 我不知道有这个直播，非常、非常方便。 - sberry

Answer 2

选项1：

$('a.claim').click(function() {
    $(this).html('Unclaim').addClass('unclaim').removeClass('claim');
});

$('a.unclaim').click(function() {
    $(this).html('Claim').addClass('claim').removeClass('unclaim');
});

选项2：

function bindClaim(){
$('a.claim').unbind('click').click(function() {
    $(this).parent().html('<span class="unclaim">Unclaim</span>');
    bindUnclaim();
});
}

function bindUnclaim(){
$('a.unclaim').unbind('click').click(function() {
    $(this).parent().html('<span class="claim">Claim</span>');
    bindClaim();
});
}

bindClaim();
bindUnclaim();

选项3（推荐）：

http://docs.jquery.com/Events/live 代替 bind。

- mauris

Answer 3

不需要使用.live()或重新绑定此方法。您只需要一个方法：

$('.claim,.unclaim').click(function() {
    var claimed = $(this).hasClass('claim') ? 'Unclaim' : 'Claim';
    $(this).text(claimed).attr('class', claimed.toLowerCase());
});

- David Hellsing

---

这并不是一个可行的解决方案，因为实际事件的复杂性。所给出的示例只是一个简单的例子；每个事件中实际上发生了更多的事情。 - Skudd

保持事件简单并根据目标应用方法（事件委托）仍然是一个好主意。 - David Hellsing

Answer 4

例如：

clickBtn.on("click.claim", evt => {
    clickBtn.off("click.claim");
    });

- Cocoa3338