Неверное переменное число передается через

Question

Когда это изначально загружает объявления занятости, отображается как jobJobs1 в консоли, что и я хочу. Как только я нажал на кнопку, которая имеет класс .employmentJobs1 .addDuty, он должен снова выйти из работыJobs1, но вместо этого он выйдет из занятостиJobs2.

Может ли кто-нибудь предоставить какие-либо указания?

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

Функция в обработчике событий мыши выполняется в гораздо более позднее время, а это означает, что цикл закончил (а значение q в результате является конечным значением цикла в каждом случае щелчка). Просто закройте значение q, используя IIFE для создания нового контекста выполнения.

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

Несмотря на то, что вы не должны помещать привязки событий в циклы, ваша проблема устраняет «инкапсуляцию».

В JavaScript используется так называемая область функций. Но вам нужна область блоков (т. Е. C#).

Here вы можете найти точное описание этой проблемы, и есть даже примеры, которые точно соответствуют вашим потребностям.

Но то, что вы могли бы вместо того, чтобы также сделать: положить elemets в контейнерах, и связать щелчок динамически на них нравится:

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

это делает всех детей внутри .element Clickable, даже если они будут добавлены после загрузки документа