Question

这是一个小问题，我确信我错过了一些非常小的东西，但我发誓我会发疯。

我有一个按钮，我试图添加并删除一个类，这是有效的，但是一旦我尝试用该新类调用另一个函数，该函数就会无声地失败。我不知道为什么这会失败，并且非常希望它可以工作

这是一个jsFiddle I'm working with，它与我使用它的方式相差无几。所以初看一下，看起来我可以做一个切换类，但是我的所有其他代码都是不可能的。

这里发布了相同的代码

$('.holdProject').on('click', function(){

    $('.holdProject').addClass('resumeProject');
    $('.holdProject').removeClass('holdProject');
    console.log('here');
});    

$('.resumeProject').on('click', function(){
  $('.resumeProject').addClass('holdProject');
  $('.resumeProject').removeClass('resumeProject');
  console.log('there');
});

同样，这是一个非常基本的例子，我正在使用它来实现切换类。

任何帮助都会很棒！

Answer 1

您需要委派click函数，因为DOMReady上不存在.resumeProject个元素。您可以通过将选择器传递给on()函数来实现此目的：

$(document).on('click', '.resumeProject', function() {
    $(this).addClass('resumeProject').removeClass('holdProject');
});

此外，您可以使用is()轻松组合两个处理程序：

$(document).on('click', '.resumeProject,.holdProject', function() { 
    if($(this).is('.resumeProject'))
    {
        $(this).addClass('holdProject').removeClass('resumeProject');
    }
    else
    {
        $(this).addClass('resumeProject').removeClass('holdProject');
    }
});

当然，最好缩小委托范围，以便将事件绑定到最近的静态父元素。由于我们不知道上下文或HTML，因此很难确定您的情况是什么。

jsFiddle Demo

Answer 2

问题是绑定是在不存在的元素上设置的。如果您不愿意，请尝试将绑定范围限定为父div或文档：

$(document).on("click", ".holdProject", function(){ 
   $(this).addClass('resumeProject');
   $(this).removeClass('holdProject');
});

$(document).on("click", ".resumeProject", function(){ 
   $(this).addClass('holdProject');
   $(this).removeClass('resumeProject');
});

Answer 3

请尝试此代码

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

    $(this).addClass('resumeProject').removeClass('holdProject');;
    console.log('here');
});    
$(document).on('click', '.resumeProject',function(){
    $(this).addClass('holdProject').removeClass('resumeProject');
    console.log('there');
});

jsfiddle

Jquery单击函数未被调用

3 个答案: