jQuery onclick dynamic binding issue

Question

У меня есть сценарий, в котором результаты, возвращаемые из запроса, заносятся в список элементов i.e <li>, списки представляют категории и подкатегории из таблицы базы данных.

Проблема заключается в том, что я хотел использовать событие jQuery onclick, чтобы вызвать значок галочки в строке, на который щелкнул этот значок галочки, и представляет собой функциональность для перехода пользователя на следующий шаг.

Проблема в том, что я не могу заставить событие onclick корректно работать в строке, которая нажата. Любая помощь будет оценена ниже: jQuery запускает событие. вот ссылка сайта http://staging.expatexchange.ph/post-advert-step1 где функциональность происходит

<script type="text/javascript"> 
$(".finish").click(function() { 
var span = $(this).closest("li").find("#theimg"); 
jQuery(span).toggle('show'); 
var isVisible = $("#theimg").is(":visible"); 
var isHidden = $("#theimg").is(":hidden"); 

if(!isVisible) { 

$('.next_btn2').prop('disabled', false); //TO ENABLE 
$(".next_btn2").css("opacity",1); 
$(".next_btn2").css("background-color","#87b119"); 

} 

else { 

$('.next_btn2').prop('disabled', true); //TO ENABLE 
$(".next_btn2").css("opacity",0.5); 
$(".next_btn2").css("background-color","#f25c27"); 

} 

}); // end function 
</script> 

Answer 1

Попробуйте это:

$("body").on('click','.finish',function() { 
var span = $(this).closest("li").find("#theimg"); 
jQuery(span).toggle('show'); 
var isVisible = $("#theimg").is(":visible"); 
var isHidden = $("#theimg").is(":hidden"); 

if(!isVisible) { 

$('.next_btn2').prop('disabled', false); //TO ENABLE 
$(".next_btn2").css("opacity",1); 
$(".next_btn2").css("background-color","#87b119"); 

} 

else { 

$('.next_btn2').prop('disabled', true); //TO ENABLE 
$(".next_btn2").css("opacity",0.5); 
$(".next_btn2").css("background-color","#f25c27"); 

} 

будет работать для динамически добавляемых элементов управления.

Для получения дополнительной информации - Source