如何在jQuery中使用生成的選擇值？[復制]-有解無憂

這個問題在這里已經有了答案：動態創建元素的事件系結？ (23 個回答) 7 小時前關閉。

您好，如果用戶在下拉串列中選擇（AND 或 OR），我正在嘗試在表中生成一個新行，將使用相同的欄位生成一個新行，它在第一行作業，但是當我嘗試在生成的行，它不起作用

這是 jQuery 中的腳本我試圖在選擇上添加 on 更改，但它沒有完成這項作業

 $(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"  id="comments_remove"><i ></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"  value = ""><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>'  
                            '<td><select  name = "DynamicTextBox"  value = ""><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>'  
                            '<td><input type="text" name = "DynamicTextBox"  value = "" placeholder="Enter Value" ></td>'   
                            '<td><select  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"  id="comments_remove"><i ></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" ><i ></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>

uj5u.com熱心網友回復：

為避免該問題并避免多次使用相同的代碼，您可以為您的事件使用事件委托.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"  id="comments_remove"><i ></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"  value = ""><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>'  
      '<td><select  name = "DynamicTextBox"  value = ""><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>'  
      '<td><input type="text" name = "DynamicTextBox"  value = "" placeholder="Enter Value" ></td>'  
      '<td><select  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"  id="comments_remove"><i ></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" ><i ></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>

uj5u.com熱心網友回復：

幾乎@Carsten L?vbo Andersen 回答，但這里有一些關于事件委托的附加資訊：

這是將事件監聽器添加到動態元素的唯一好方法
它減少了頁面上的事件處理程式的數量，從而提高了性能

如果我們已經在談論性能：在使用 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 的頻率

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485375.html

標籤：javascript html jQuery

上一篇：為什么將元素附加到先前附加的元素不起作用？

下一篇：如何使用jquery僅將那些沒有任何價值的文本框設為只讀？