JQuery .change не может получить вставленные флажки.

Question

У меня есть серьезная проблема в моем скрипте, когда я хочу добавить новый флажок через вызов ajax. Проблема в том, что я не могу получить значение этого флажка после его вставки. Когда я изменяю selection1 и select2 и выбираю 3 и опции. Предупреждение должно показывать значения четырех полей при каждом изменении поля.

Я приведу пример здесь в jsfiddle: https://jsfiddle.net/pm4t91ab/39/

Script Код:

<script> 
$(function() { 
    $(".ch").change(function() { 
    // Récupérer les données du formulaire 
    var select1 = $("select#id1").val(); 
    var select2 = $("select#id2").val(); 
    var country = $("select#country").val(); 
     var options = ""; 
    var op = "<td>Options :</td>" + 
     "<br />" + 
     "<td>" + 
     "<div>" + 
     "<label>" + 
     "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" + 
     "</div>" + 
     "<div>" + 
     "<label>" + 
     "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" + 
     "</div>" + 
     "</td>"; 

    if (country != "") { 
     $('#options_insert').html(op); 
    } 

    // Bind the elements dynamically created here and get the selected items 
    $(document).on('click', 'input[name="options"]', function() { 
     var options = $("input[name=options]:checked").map(function() { return this.value;}).get().join(","); 
    }); 


    alert("select1=" + select1 + " select2=" + select2 + " Country=" + country + " options=" + options); 

    }); 

}); 
</script> 

HTML код:

<table> 

    <tr> 
    <td> 
     Selection 1 : 
    </td> 
    <td> 
     <select name="select1" class="ch" id="id1"> 
     <option value="">Nothing</option> 
     <option value="val1">val1</option> 
     <option value="val2">val2</option> 
     <option value="val3">val3</option> 
     </select> 
    </td> 
    </tr> 

    <tr> 
    <td> 
     Selection 2 : 
    </td> 
    <td> 
     <select name="select2" class="ch" id="id2"> 
     <option value="">Nothing</option> 
     <option value="val1">sel1</option> 
     <option value="val2">sel2</option> 
     <option value="val3">sel3</option> 
     </select> 
    </td> 
    </tr> 

    <tr> 
    <td> 
     Selection 3 : 
    </td> 
    <td> 
     <select name="select" class="ch" id="country"> 
     <option value="">Nothing</option> 
     <option value="val1">Maroc</option> 
     <option value="val2">USA</option> 
     <option value="val3">Egypt</option> 
     </select> 
    </td> 
    </tr> 
    <tr id="options_insert"> 

    </tr> 
</table> 

любая помощь будет очень apreciated

Answer 1

Вот обновленная версия вашего кода. Он отделяет обработку событий предупреждений (при изменении значения формы) от обработки событий опций show (при изменении значения страны).

$(document).on('change', "select#country", function() { 
 
    var $optionsElement = $('#options_insert'); 
 
    var $selectCountry = $("select#country").val(); 
 

 
    if ($selectCountry === '') { 
 
    $optionsElement.html(""); 
 
    } else { 
 
    $optionsElement.html("<td>Options :</td>" + 
 
     "<br />" + 
 
     "<td>" + 
 
     "<div>" + 
 
     "<label>" + 
 
     "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" + 
 
     "</div>" + 
 
     "<div>" + 
 
     "<label>" + 
 
     "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" + 
 
     "</div>" + 
 
     "</td>"); 
 
    } 
 
}); 
 

 
$(document).on('change', '.ch', function() { 
 
    var $select1 = $("select#id1").val(); 
 
    var $select2 = $("select#id2").val(); 
 
    var $selectCountry = $("select#country").val(); 
 
    var $options = $("input[name=options]:checked").map(function() { 
 
    return this.value; 
 
    }).get(); 
 

 
    alert("select1=" + $select1 + " select2=" + $select2 + " Country=" + $selectCountry + " options=" + $options.join(",")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 

 
    <tr> 
 
    <td> 
 
     Selection 1 : 
 
    </td> 
 
    <td> 
 
     <select name="select1" class="ch" id="id1"> 
 
     <option value="">Nothing</option> 
 
     <option value="val1">val1</option> 
 
     <option value="val2">val2</option> 
 
     <option value="val3">val3</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     Selection 2 : 
 
    </td> 
 
    <td> 
 
     <select name="select2" class="ch" id="id2"> 
 
     <option value="">Nothing</option> 
 
     <option value="val1">sel1</option> 
 
     <option value="val2">sel2</option> 
 
     <option value="val3">sel3</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     Selection 3 : 
 
    </td> 
 
    <td> 
 
     <select name="select" class="ch" id="country"> 
 
     <option value="">Nothing</option> 
 
     <option value="val1">Maroc</option> 
 
     <option value="val2">USA</option> 
 
     <option value="val3">Egypt</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr id="options_insert"></tr> 
 
</table>

Answer 2

В JQuery вас необходимо связать событие динамически добавленных элементов, используя «on»

, например,

$(function() { 
     $(".ch").change(function() { 
     // Récupérer les données du formulaire 
     var country = $("select#country").val(); 

     var op = "<td>Options :</td>" + 
      "<br />" + 
      "<td>" + 
      "<div>" + 
      "<label>" + 
      "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" + 
      "</div>" + 
      "<div>" + 
      "<label>" + 
      "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" + 
      "</div>" + 
      "</td>"; 

     if (country != "") { 
       $('#options_insert').html(op); 
     } 
     // Since this is in the change event of the select 
     // It will never have item selected 
     var options = $("input[name=options]:checked").map(function() { 
      return this.value; 
     }).get().join(","); 

     alert("Country=" + country + " options=" + options); 

     }); 

     // Bind the elements dynamically created here and get the selected items 
     $(document).on('click', 'input[name="options"]',function(){ 
      var options = $("input[name=options]:checked").map(function() { 
       return this.value;}).get().join(","); 

       alert(options); 
     }); 
    }); 

Answer 3

Это не работает, потому что вы пытаетесь получить значения проверяемых входов и флажков вы вставляя невыбранные по умолчанию. Кроме того, он будет работать только сразу после вставки. Если вам необходимо получить значения этого флажков после их выбора, вы должны создать новое событие например

$('table').on('click','input[type="checkbox"]',function(){ 
    var options = $('input[type="checkbox"]:checked').map(function() { 
     return this.value;}).get().join(","); 
}); 

Answer 4

Хорошо, вот проблема. Вы добавляете дополнительные элементы в DOM (флажки), и когда это происходит, вам обычно нужно добавлять к ним прослушиватели событий. Однако, вместо этого вы можете просто изменить эту строку:

$(".ch").change(function() { 

... к этому ...

$("table").on('change', '.ch', function() { 

И что следует сделать трюк. Here's more information.