Question

我有一个小但烦人且奇怪的问题。我有2个按钮，可以为p元素添加一个类。当用户点击按钮时，它会将类“groen”或“rood”（取决于按钮）添加到p元素。然后，用户可以使用类“groen”或“rood”单击该p元素，然后它应该执行某些操作，但它不会执行任何操作。但是如果我在HTML中为p元素提供“groen”或“rood”类，它就会执行jQuery操作。

我的项目有jsFiddle：http://jsfiddle.net/c3dfj/

如果要查看问题，请单击“ja”或“nee”复选框，然后检查p元素中是否包含“akkoord”文本。它显示你“akkoord groen”或“akkoord rood”。（取决于您单击的按钮）。但是，如果你点击“akoord”它没有做任何事情。我将类rood / groen添加到它确实有效的HTML中：/

<p class="akkoord"><br/>Akkoord</p>

Answer 1

绑定点击处理程序时，没有{。{1}}元素与'.rood'或'.groen'使用p而不是

on

这样，按下按钮时分别具有类'.rood'或'.groen'的任何元素都会对点击作出反应。你当然可以将'body'选择器改进为一个封闭的div或类似的东西，如果可能的话，建议你在你的代码中选择所有'.rood'和所有'.groon'元素，以便与我保持兼容使用'身体'。我也冒昧地简化代码以消除不必要的选择

Answer 2

尝试使用jQuery .hasClass（），如果它有类而不是重定向到您的方法或调用该函数。否则应用addClass（）函数。

Answer 3

HTML：

<div class="parent">
  <button class="addgroen">addgroen</button>
  <button class="addrood">addrood</button>
  <p>
  </p>
</div>

jQuery：

$('.addgroen').click(function(){
   $('p').removeClass('rood').addClass('groen');
})
$('.addrood').click(function(){
   $('p').removeClass('groen').addClass('rood');
})

on jQuery＆lt; 1.7你应该使用：

$('.groen').live('click',function(){
   alert('p element with groen class clicked');
});
$('.rood').live('click',function(){
   alert('p element with rood class clicked');
});

在jquery＆gt; 1.6上你应该使用：

$('.parent').on('click','.groen',function(){
   alert('p element with groen class clicked');
});
$('.parent').on('click','.rood',function(){
   alert('p element with rood class clicked');
});

Answer 4

如果你动态添加一些东西你应该去jQuery ON和OFF

Jquery ON

Jquery OFF

$(document).on('click','.rood',function() {
//YOUR CODE
});

addClass无法正常工作

4 个答案: