Question

当我想通过ajax调用添加新的复选框输入时，我的脚本出现严重问题。问题是我插入后无法检索此复选框的值。当我更改selection1和selection2以及选择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>

任何帮助都会非常苛刻

Answer 1

好的，这就是问题所在。您正在向DOM添加其他元素（复选框），当发生这种情况时，您通常需要向它们添加事件侦听器。但是，您只需更改此行：

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

......对此...

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

这应该可以解决问题。 Here's more information.

Answer 2

以下是您的代码的更新版本。它将警报值事件处理（当表单值更改时）与show options事件处理（当国家/地区值更改时）分开。

＆＃13;

$(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(","));
});

＆＃13;

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

＆＃13;

Answer 3

在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 4

它不起作用，因为您尝试检索已检查输入的值，并且默认情况下取消选中您插入的复选框。除此之外，它只会在插入后才能工作。如果您在选择它们后需要获取该复选框的值，则必须创建新事件，例如

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

Jquery .change无法检索插入的复选框值

4 个答案: