Jquery .change無法檢索插入的複選框值

Question

當我想通過ajax調用添加新的複選框輸入時，我的腳本存在嚴重問題。問題是我插入後無法檢索此複選框的值。當我改變選擇1和選擇2和選擇3和選項。警報必須顯示每個字段更改的4個字段的值。

我這裏舉一個例子中的jsfiddle：https://jsfiddle.net/pm4t91ab/39/

腳本代碼：

<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

這是您的代碼的更新版本。它將顯示選項事件處理（當國家/地區值更改時）將警報值事件處理（表單值更改時）分開。

$(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

它不工作，因爲你嘗試檢索的檢查輸入和插入你默認取消選中複選框的值。除此之外，它只會在插入後才起作用。如果您需要選擇它們後獲取複選框的值，你必須創建新的事件e.g

$('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.