toggleclass不绑定点击事件 [英] toggleclass not binding click event

问题描述

在我的按钮中添加了一个类，并试图在onclick事件之后启动，但不工作。很简单的代码为什么事件没有绑定我做错了什么？

http://jsfiddle.net/davidThomas/n2WUn/3/

---

<$ p （click，function（）{
$（this）.html（'Approve'）;
$（。remove-participant）。 （this）.toggleClass（'add-participant'）;
}）; （），
$ b $（。add-participant）。on（click，function（）{
alert（'why no alert？'）;
$（this） .html（'Waitlist'）;
$（this）.toggleClass（'add-participant'）;
}）;

解决方案

您正在移除和动态添加类，事件绑定不再可用。

  $（document）.on（click，.remove函数（）{
 $（this）.html（'Approve'）; 
 $（this）.toggleClass（'add-participant'）; 
}）; 
 $ b $（document）.on（click，.add-participant，function（）{
 alert（'why not alert？'）; 
 $（这个）.html（'Waitlist'）; 
 $（this）.toggleClass（'add-participant'）; 
}）; 
  

使用容器选择器来代替 document 在任何给定的时间点都存在于DOM中。

看看你的脚本，你可以使用一个事件处理程序将其绑定到另一个不需要切换的类（您需要添加特定元素）。

Added a class to my button and trying to launch on onclick event after, not working . pretty simple code why is the event not binding what am I doing wrong?

http://jsfiddle.net/davidThomas/n2WUn/3/

---

$(".remove-participant").on("click",function(){
$(this).html('Approve');
$(this).toggleClass('add-participant');
 });

$(".add-participant").on("click",function(){
alert('why no alert?');
$(this).html('Waitlist');
$(this).toggleClass('add-participant');
});

解决方案

You are removing and adding the classes dynamically, so your event binding is no longer available. One way you can fix this is by using event delegation.

$(document).on("click", ".remove-participant", function () {
    $(this).html('Approve');
    $(this).toggleClass('add-participant');
});

 $(document).on("click", ".add-participant", function () {
    alert('why no alert?');
    $(this).html('Waitlist');
    $(this).toggleClass('add-participant');
});

Instead of document use a container selector that exists in DOM at any given point in time.

Looking at your script you can just do with one event handler bind it to another class that you don't toggle (which you need to add the particular element).

这篇关于toggleclass不绑定点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！