mercredi 30 décembre 2015

Jquery .change can't retrieve inserted checkbox values

I have a serious problem in my script when I want to add a new checkbox input through ajax call. The problem is that i can't retrieve the value of this checkbox after it's inserted.

I give an example here in jsfiddle : http://ift.tt/1OlsiPA

Script Code :

<script>
    $(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);
        }
        var options = $("input[name=options]:checked").map(function() {
          return this.value;
        }).get().join(",");

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

      });

    });
</script>

Html Code :

<table>
  <tr>
    <td>
      Selection :
    </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>

any help will be very apreciated




Aucun commentaire:

Enregistrer un commentaire