0

我有一个小但烦人且奇怪的问题。我有 2 个向 ap 元素添加类的按钮。当用户单击按钮时，它会将类“groen”或“rood”（取决于按钮）添加到 p 元素。然后，用户可以单击具有“groen”或“rood”类的 p 元素，然后它应该做一些事情，但它什么也不做。但是，如果我在 HTML 中为 p 元素提供类“groen”或“rood”，它确实会执行 jQuery 操作。

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

如果您想查看问题，请单击“ja”或“nee”复选框并检查其中包含“akkoord”文本的 p 元素。它向您显示“akkoord groen”或“akkoord rood”。（取决于您单击的按钮）。但是，如果您单击“akoord”，它不会执行任何操作。我将类 rood/groen 添加到它确实有效的 HTML 中：/

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

4 回答 4

2

当您绑定点击处理程序时，没有p使用“.rood”或“.groen”的on元素

    $('body').on('click','.rood',function() {
        var container = $(this).parents('.container_vragen').find('.container2');
            container.fadeOut(400, function() {
               container
                   .css('overflow', 'hidden')
                   .appendTo("#niet_geregeld");
               $(this).parents('#niet_geregeld')
                   .find('.container2')
                   .css('padding-left', '30px')
                   .fadeIn(400);
            });
    });

    $('body').on('click','.groen',function() {
        var container = $(this).parents('.container_vragen').find('.container2');
            container.fadeOut(400, function() {
               container.css('overflow', 'hidden')
                        .appendTo("#geregeld");
               $(this).parents('#geregeld')
                      .find('.container2') 
                      .css('padding-left', '30px')
                      .fadeIn(400);
            });
    });

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

于 2012-12-06T11:39:54.353 回答
0

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

于 2012-12-06T11:37:07.050 回答
0

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');
})

在 jQuery < 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 >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');
});
于 2012-12-06T11:42:51.030 回答
0

如果您要动态添加一些东西，您应该选择 jQuery ON 和 OFF

jQuery 开启

jQuery 关闭

$(document).on('click','.rood',function() {
//YOUR CODE
});
于 2012-12-06T11:47:55.613 回答