динамической вставки флажка JQuery OnChange событие потерял

Question

я следующее:

somefile.php

$("document").ready(function() { 
    var handler = function(data) { 
    var JsDiv = document.getElementById("somediv"); 
    JsDiv.innerHTML = data; 
    }; 

$("input[type='checkbox']").change(function() { 
    console.log("execute lots of code in this function"); 
    //I need to execute this part again with the new checkboxes 
    //. 
    //. 
    //. 
    //and then 
$.ajax({ 
     url: "ajaxFile.php", 
     success: function(data, textStatus, XMLHttpRequest) { handler(data); } 
}); 

    }); 
}); 

<div id="somediv">
<input type="checkbox" id="someid1" value="anything1" /> checkbox1
<input type="checkbox" id="someid2" value="anything2" /> checkbox2
</div>

---

ajaxFile.php
echo "
<input type='checkbox' id='someid3' value='anything3' /> checkbox3 <br />
<input type='checkbox' id='someid4' value='anything4' /> checkbox4
";

---

Проблема заключается в том, что $ ("вход [тип = 'флажок']"). Изменить (функция() {}) запускается на выполнение очень хорошо, когда я сначала загрузить , но как только новые флажки загружены через ajax, они не ограничены этой функцией. Я видел вещи о bind() и live(), но я не совсем понимаю, как привязать новые флажки к функции, которую я уже определил. Мне нужно выполнить какой-то код, который находится внутри .change() .. Я извлечу этот код за пределами .change() и вызову эту функцию позже, но я не слишком уверен, как это сделать.

Если мой вопрос не ясен, сообщите мне, и я буду повторять фразу. Спасибо за помощь.

Answer 1

Вам просто нужно делегировать слушателю-предку, который не будет уничтожен. В приведенном ниже фрагменте используется .on() с синтаксисом делегирования и является заменой вашего слушателя событий .change().

$("#someContainer").on("change", "input[type='checkbox']", function() { 
    console.log("execute lots of code in this function"); 
}); 

someContainer, очевидно, (я надеюсь) имя-заполнитель. Это просто означает, что любой контейнер обертывает ваши целевые входы. Сделайте все возможное, чтобы определить ближайшего предка, так как это будет иметь наибольшую эффективность. Но если вы абсолютно должны, вы всегда можете использовать документ:

$(document).on("change" /* .....etc.... */);