Question

当这最初加载jobsJobs在控制台中显示为jobsJobs1时，这就是我想要的。一旦我点击了具有.employmentJobs1 .addDuty类的按钮，它应该再次注销jobsJobs1，而是注销jobsJobs2。

有人可以提供任何指导吗？

for (var q = 1; q <= 1; q++){
   console.log('employmentJobs'+q); 

    $('.employmentJobs'+q +' .addDuty').click(function(){

        console.log('employmentJobs'+q); 
        countDuties++;
        $('.employmentJobs'+q +' .mainDuties').clone().attr('class', 'form-group mainDutyOrder mainDuties'+ countDuties).insertAfter('.employmentJobs'+q +' .mainDutyOrder:last');

        return false;

    }); 

  }
}

Answer 1

click事件处理程序中的函数在很晚的时间执行，这意味着循环已经完成（结果q的值是每次单击事件中循环的最终值）。只需使用IIFE关闭q的值即可创建新的执行上下文。

for (var q = 1; q <= 1; q++){

   //close over q
   (function(q){

   console.log('employmentJobs'+q); 

    $('.employmentJobs'+q +' .addDuty').click(function(){

        console.log('employmentJobs'+q); 
        countDuties++;
        $('.employmentJobs'+q +' .mainDuties').clone().attr('class', 'form-group mainDutyOrder mainDuties'+ countDuties).insertAfter('.employmentJobs'+q +' .mainDutyOrder:last');

        return false;

    }); 

  //pass q in to close over its value
  })(q)

}

Answer 2

尽管如此，你不应该把事件绑定放在循环中，你的问题应该解决＆＃34;封装＆＃34;。

JavaScript使用所谓的函数作用域。但你需要的是一个块范围（即c＃）。

Here您可以找到此类问题的准确描述，甚至还有一些完全符合您需求的示例。

但你可以做的另一件事是：将你的元素放在容器中，并动态地绑定它们，如：

$('body).on('click', '.yourWrapperElement > .clickableElements', function() {
    //cour cloning magic here
});

这使得所有孩子都可以点击，即使他们在文档加载后添加了

传递的变量号错误

2 个答案: