динамическая вставка флажка, потерянное событие jquery onchange - PullRequest
Новая
       21

динамическая вставка флажка, потерянное событие jquery onchange

0 голосов
/ 27 марта 2012

У меня есть следующее:

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 "<br> <input type='checkbox' id='someid3' value='anything3' /> checkbox3 <br /><br> <input type='checkbox' id='someid4' value='anything4' /> checkbox4<br> ";

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

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

1 Ответ

4 голосов
/ 27 марта 2012

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

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

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

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