How do I make DOM/event listeners aware of newly appended nodes?

Question

TL;DR:

I use $(..).append(node), but newly added nodes are not considered for inclusion despite them (supposedly) matching jQuery selectors.

Question

I have some code below that uses checkboxes but emulates radio button behavior. In other words, only one checkbox can (validly) be selected at any time. No more than one should be selected.

If you run the example below and click on the first 3 checkboxes, they will behave like radio buttons. Only one will be selected, no matter how many you click.

However, if you Add Point, newly added points will not be considered for the JS even though in theory it should grab them too...

Specifically: You can select the newly added checkbox, and it will be selected in addition to one already selected previously. That is incorrect as only 1 should be selected at any time and all others should be unselected.

What is happening and how can I have newly added nodes be included into jQuery selectors?

$(function() {

  //check first box
  $("input.duty:first").prop("checked", true);

  //clicking unchecked box should check that box
  //unchecks all others
  $(".duty").on('click', function(event) {
    $("input.duty").prop("checked", false);
    $(this).prop("checked", true);
  });

  $("#addCasePoint").on("click", function() {
    var newRowIndex = $('#newRowIndex').text();
    var template = $('#casePointTemplate').data('template');
    template = template.replace(/__index__/g, newRowIndex);
    $('#casePointsFieldset').append(template);
    $('#newRowIndex').text(++newRowIndex);
    return false;
  });

  //deletes case point
  $("#selection").on("click", ".removeCase", function() {
    var caseCount = $('#selection .casePointFieldset').length
    if (caseCount === 1) return false; //keep at least one row
    $(this).closest("fieldset").remove();
    return false;
  });
});

.casePointFieldset {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="selection">
  <fieldset id="casePointsFieldset">
    <legend>Case Points</legend>
    <div id="pointFieldset">
      <fieldset class="casePointFieldset">
        <div>
          <label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
        </div>
        <button class="removeCase">Remove</button>
      </fieldset>
      <fieldset class="casePointFieldset">
        <div>
          <label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
        </div>
        <button class="removeCase">Remove</button>
      </fieldset>
      <fieldset class="casePointFieldset">
        <div>
          <label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
        </div>
        <button class="removeCase">Remove</button>
      </fieldset>
    </div>
    <!-- include template -->
    <span id="casePointTemplate" data-template="<fieldset class=&quot;casePointFieldset&quot;><div><label><span>Duty:</span> <input name=&quot;point[__index__]&quot; class=&quot;duty&quot; value=&quot;1&quot; type=&quot;checkbox&quot;></label></div><button class=&quot;removeCase&quot;>Remove</button></fieldset>">
    </span>
  </fieldset>

  <button id="addCasePoint">Add Point</button>
</form>

*Event delegation* would be a good topic for you to Google and learn a little about. — , Mar 31 '17 at 19:46

score 2 · Accepted Answer · answered Mar 31 '17 at 19:44

The problem is how you're binding to them. The .click function (or .on('click')) basically works like this:

Find all of the currently existing elements which match a selector ($('.your.selector.here'))
Attach an event handler to each of those elements

Notice how I mentioned it binds to ones which already exist? That means it won't bind to newly created ones automatically. However, you can use .on to bind to the parent of those elements then listen for events on a selector. I'll show you what I mean:

$('#addItem').click(function() {
  $('.container').append('<button class="item">Item</button>');
});

// Notice that I'm binding to the parent
// then specifying which events from it's children
// I want to listen to (click events from .item elements)
$('.container').on('click', '.item', function() {
  console.log("I'm an item");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="item">Item</button>
</div>
<button id="addItem">Add New Item</button>

If you change your on('click' to work like that then you'll have no problems.

thanks. I found that I could also bind new events by using `:last` selector, when I add a new node. But what you have is better (less code duplication) — Dennis, Mar 31 '17 at 20:01

score 1 · Answer 2 · answered Mar 31 '17 at 19:42

1

Easiest way will be, attaching the event to the document. In the past this was done with the live() method.

 $(document).on('click', '.duty', function(event) {
      $("input.duty").prop("checked", false);
      $(this).prop("checked", true);
  });

answered Mar 31 '17 at 19:42

Marijan

1,825
1
13
18

How do I make DOM/event listeners aware of newly appended nodes?

2 Answers2