jQuery的点击功能没有被调用

Question

这有点小问题，我敢肯定我错过了一些很小的东西，但是我发誓我会发疯。

我有一个按钮，我试图在其上添加和删除一个类，并且该按钮正在运行，但是一旦我尝试用该新类调用另一个函数，该函数就会自动失败。 我不知道为什么这会无声地失败，并且非常希望它能正常工作

这是我正在使用的jsFiddle，与我使用它的目的截然不同 。 因此，乍一看，我似乎可以进行切换类，但是在其中没有其他所有代码的情况下，这是不可能的。

此处发布的相同代码

$('.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演示

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