How to use a generated select value in jQuery?

Question

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

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

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

score 1 · Accepted Answer · answered Jun 02 '22 at 13:19

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>

GuentherK · Answer 2 · 2022-06-02T13:38:38.673

Pretty much @Carsten Løvbo Andersen answer, but here some additional info to event delegation:

it is the only good way to add evenet listeners to dynamic elements
it reduces the amount of event handlers on a page, thus improving performance

And if we are already talking abount performance: in the context of using jQuery avoid using the jQuery selector multiple times in the same function for the same element. e.g.

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

instead save is to a variable like

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

this reduces how often jQuery parses the dom

How to use a generated select value in jQuery?

2 Answers2