jQuery在選擇動態創建的選擇上添加驗證規則

Question

我在使動態添加所需的輸入時遇到麻煩。 特別是在“選擇”輸入中

我已經嘗試過手動檢查（通過Jquery驗證）提交的輸入是否正確，但是遇到了同樣的問題。 “必需”類也無濟於事。

這是html：

<form id='myform'>
  <div>
    <div id="addRow">+</div>
    <div id="deleteRow">-</div>
  </div>
  <div>
    <table id="tableex">
      <tr>
        <td>
          <select name="selectbox[]" data-selected="" class='selectdyna required'>
        <option value="" selected="selected" disabled="disabled">env :</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        </select>
        </td>
      </tr>
    </table>
  </div>

  <div>
    <input type='submit' value='Validate'>
  </div>
</form>

這是我的js：

$(document).ready(function() {
  $("#addRow").click(function() {

    var str = "<tr>\n" +
      "                <td id=\"selecttd\">\n" +
      "                    <select name=\"selectbox[]\" class='selectdyna required' data-selected=\"\">\n" +
      "                        <option value=\"\" selected=\"selected\" >env :</option>\n" +
      "                        <option value=\"1\">option1</option>\n" +
      "                        <option value=\"2\">option2</option>\n" +
      "                        <option value=\"3\">option3</option>\n" +
      "                    </select>\n" +
      "                </td>\n" +
      "            </tr>";
    $("#tableex").append(str)
     $('#myform').validate();
        $('.selectdyna').rules('add',  { 'required': true });
  })
  $("#deleteRow").click(function() {
    if ($("#tableex tr").length > 1) {
      $("#tableex tr:last").remove();

    } else {
      alert("there must been one line minimum.")
    }
  })
})

這是小提琴的鏈接： https : //jsfiddle.net/v3tj2c5u/

Answer 1

我不明白為什么您需要這樣的下拉菜單名稱。 您可以按照以下演示進行操作

$(document).ready(function() {
  $("#addRow").click(function() {
   var count= $("#tableex tr").length+1;
    var str = "<tr>\n" +
      "                <td id=\"selecttd\">\n" +
      "                    <select name=\"selectbox"+count+"\" class='selectdyna required' data-selected=\"\">\n" +
      "                        <option value=\"\" selected=\"selected\" >env :</option>\n" +
      "                        <option value=\"1\">option1</option>\n" +
      "                        <option value=\"2\">option2</option>\n" +
      "                        <option value=\"3\">option3</option>\n" +
      "                    </select>\n" +
      "                </td>\n" +
      "            </tr>";
    $("#tableex").append(str)
     $('#myform').validate();
        $('.selectdyna').rules('add',  { 'required': true });
  })
  $("#deleteRow").click(function() {
    if ($("#tableex tr").length > 1) {
      $("#tableex tr:last").remove();

    } else {
      alert("there must been one line minimum.")
    }
  })
})

工作演示