Dropdown list checkbox event not getting triggered on checkbox click

Question

I am having a dropdown list on the header of data table. The list has multiple checkbox and I want to call an event when the checkbox is checked or unchecked.

During debug, breakpoint is not hitting the checkbox click event. Please let me know how to implement for checkbox click/change event in this scenario.

Try binding on body instead, that way you will catch the event after DOM change: $("body").on("click", "#chk_select_abst", function () { ... }); — skobaljic
– skobaljic, Commented Jan 9, 2018 at 10:40
cannot be bound on body since the dropdown values load after the data table has loaded on a button click event. Any approach to get the event called in the above setup? — Deepak Duvvada
– Deepak Duvvada, Commented Jan 9, 2018 at 11:02
yes, it can and it should. you didn't even try to do it, that's a shame :) — skobaljic
– skobaljic, Commented Jan 13, 2018 at 1:59

n4m31ess_c0d3r · Accepted Answer · 2018-01-09 13:13:59Z

This is because #chk_select_abst is not rendered at the time of DOM ready when you are binding that event.

For binding events on dynamically added DOMs, you can bind or delegate the event somewhere on its parent DOM node which you are sure will be there on page load and will NEVER be removed/replaced dynamically. Behind the scenes, this make use of event bubbling or event propagation. Check out this link for more info about bubbling.

A safe bet is to use the parent node as body. But, you can and should use a lower parent node (in this case #ul_AbandonedStates) for performance gain.

Documentation for jQuery event delegation.

var json = {
  abandonState: [{
    Name: 'name 1',
    Value: 'value 1'
  }, {
    Name: 'name 2',
    Value: 'value 2'
  }]
}

function addCheckBox() {
  if (json) {
    if (json.abandonState) {
      var abandonedStates = json.abandonState;
      var li = $('<li>');
      var select = $("<label><input id='chk_select_abst' type='checkbox' class='abandonstatecheckclass' value='-1' name='Select All' /> Select All</label>");
      var res = li.append(select);
      $('#ul_AbandonedStates').append(res);
      $.each(abandonedStates, function(index, item) {
        var li = $('<li>');
        var chk = $("<label><input id='chk_" + item.Value + "' type='checkbox' class='abandoncheckclass' value='" + item.Value + "' name='" + item.Name + "' />" + item.Name + "</label>");
        var res = li.append(chk);
        $('#ul_AbandonedStates').append(res);
      });
      var li = $('<li>');
      var btn = $('<button id="ul_AbandonedStates_ok" class="btn btn- primary btn- xs" type="button" value="OK">OK</button>');
      var res = li.append(btn);
      $('#ul_AbandonedStates').append(res);
    }
  }
}

$(document).ready(function() {
  //change here
  $("#ul_AbandonedStates").on("click", "#chk_select_abst", function() {
    $("#ul_AbandonedStates input:checkbox").prop('checked', $(this).prop('checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <th align="center" width="13%" style="position:relative;" index=6 name="abandonedState">
    Abandon State
    <div class="down-arrow-wrapper">
      <a href="#" class="down-arrow" id="da-abandonstate"></a>
      <ul class="checkbox-list" id="ul_AbandonedStates"></ul>
    </div>
    <th>
</table>

<button class="add" onclick="addCheckBox()">Add List</button>

Collectives™ on Stack Overflow

Dropdown list checkbox event not getting triggered on checkbox click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related