如何在 jQuery 中使用生成的 select 值？

Question

你好，我正在尝试在 table 中生成一个新行，如果用户 selects（AND 或 OR）在下拉列表中将使用相同的字段生成一个新行，它是在第一行工作，但是当我尝试在生成的行上 select 时，它不起作用

这是 jQuery 中的脚本我试图在 select 上添加 on change 但它没有完成工作

 $(function () {
                        $('.sell').on('change', function () {
                            var id = $(this).closest("table.table-review").attr('id');  // Id of particular table
                            var val = $(this).val();
                            if(val == "AND" || val =="OR"){
                            console.log(id);
                            var div = $("<tr />");
                            div.html(GetDynamicTextBox(id));
                            $("#"+id+"_tbody").append(div);
                            }
                        });
                        $(document).on("click", "#comments_remove", function () {
                            $(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
                            $(this).closest("tr").remove();
                        });
                        function GetDynamicTextBox(table_id) {
                            //$('#comments_remove').remove();
                            var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length+1;
                            return '<td>'+rowsLength+'</td>' + 
                            '<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>' +
                            '<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>' +
                            '<td><input type="text" name = "DynamicTextBox" class="form-control" value = "" placeholder="Enter Value" ></td>' + 
                            '<td><select class="form-control sell" name="argSelect" onchange="genfun()" id="mySelect"><option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option></select></td>' +
                            '<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>'
                        }
                        function genfun(){
                            var id = $(this).closest("table.table-review").attr('id');  // Id of particular table
                            var val = document.getElementById("mySelect").value;
                            if(val == "AND" || val =="OR"){
                            console.log(id);
                            var div = $("<tr />");
                            div.html(GetDynamicTextBox(id));
                            $("#"+id+"_tbody").append(div);
                            }
                        }
                    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
        <table class="table table-review review-table mb-0" id="table_achievements">
        <thead>
        <tr>
        <th style="width:40px;"></th>
        <th></th>
        <th></th>
        <th></th>
        <!-- <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th> -->
        </tr>
        </thead>
        <tbody id="table_achievements_tbody">
        <tr>
        <th>1</th>
        <th>
        <select class="form-control">
        <option>Field Name</option>
        <option>Div Awada</option>
        <option>Div Vlad</option>
        </select>
        </th>
        <th>
        <select class="form-control">
        <option>Equals</option>
        <option>Greater than</option>
        <option>Less than</option>
        </select>
        </th>
        <th><input type="text" id="text2" class="form-control" placeholder="Enter Value" ></th>
        <th style="width: 120px;">
        <select class="form-control sell" name="argSelect" >
        <option value="Arg">Argument</option>
        <option value="AND">AND</option>
        <option value="OR">OR</option>
        <option value="ONLY">ONLY</option>
        </select>
        </th>
        <th style="width:92.56px;"></th>
        </tr>
        </tbody>
        </table>
        </div>

Answer 1

为避免此问题并避免多次使用相同的代码，您可以为 .change 事件使用事件委托。

所以使用 $(document).on('change','.sell', function() { 并删除你的 genfun 函数；

演示

$(function() {
  $(document).on('change','.sell', function() {
    var id = $(this).closest("table.table-review").attr('id'); // Id of particular table
    var val = $(this).val();
    if (val == "AND" || val == "OR") {
      console.log(id);
      var div = $("<tr />");
      div.html(GetDynamicTextBox(id));
      $("#" + id + "_tbody").append(div);
    }
  });
  $(document).on("click", "#comments_remove", function() {
    $(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
    $(this).closest("tr").remove();
  });

  function GetDynamicTextBox(table_id) {
    //$('#comments_remove').remove();
    var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length + 1;
    return '<td>' + rowsLength + '</td>' +
      '<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>' +
      '<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>' +
      '<td><input type="text" name = "DynamicTextBox" class="form-control" value = "" placeholder="Enter Value" ></td>' +
      '<td><select class="form-control sell" name="argSelect" id="mySelect"><option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option></select></td>' +
      '<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-review review-table mb-0" id="table_achievements">
    <thead>
      <tr>
        <th style="width:40px;"></th>
        <th></th>
        <th></th>
        <th></th>
        <!-- <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th> -->
      </tr>
    </thead>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          <select class="form-control">
            <option>Field Name</option>
            <option>Div Awada</option>
            <option>Div Vlad</option>
          </select>
        </th>
        <th>
          <select class="form-control">
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          </select>
        </th>
        <th><input type="text" id="text2" class="form-control" placeholder="Enter Value"></th>
        <th style="width: 120px;">
          <select class="form-control sell" name="argSelect">
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          </select>
        </th>
        <th style="width:92.56px;"></th>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

差不多@Carsten Løvbo Andersen 的回答，但这里有一些关于事件委托的额外信息：

这是给动态元素添加 evenet 监听器的唯一好方法
它减少了页面上事件处理程序的数量，从而提高了性能

如果我们已经在谈论性能：在使用 jQuery 的上下文中，避免在同一元素的同一函数中多次使用 jQuery 选择器。例如

function foo() {
   $(this).closest("tr").prev()...
   $(this).closest("tr").remove();
}

而是保存到像

这样的变量

function foo() {
   var item = $(this).closest("tr");
   item.prev()...
   item.remove();
}

这减少了 jQuery 解析 dom

的频率

如何在 jQuery 中使用生成的 select 值？

How to use a generated select value in jQuery?

javascript

html

jquery