How to use a generated select value in jQuery?

June 2, 2022

hello i am trying to generate a new line in the table if the user selects (AND or OR) in the dropdown a new line will be generated with the same fields, it’s working on the first line but when i am trying to select on the generated line, it doesn’t works

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

this is the script in jQuery i tried to add the on change on the select but it didn’t do the job

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

>Solution :

To avoid the problem and avoid having the same code multiple times, you can use event delegation for your .change event.

So use $(document).on('change','.sell', function() { and delete your genfun function;

Demo

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