dynamic items not triggering on (.on("click") event

Question

I have a click event that looks like this.

    $( ".open_report" ).on( "click",function() {
        console.log("on click");
        //Do Stuff
    });

it triggers on already created items, but not on new (dynamic) created items.

Except for the fact that the ids differ ( which it should) and that the data-report tag data differ, they are the same code. So I cant figure out why my on click event does not fire on dynamically added items.

loaded item which works

<tr id="18109599-1516219070.html" data-report="18109599-1516219070.html" class="select data-row even">
  <td style="width: 300px;" data-report="18109599-1516219070.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>Discharge Summary</label>
    </div>
  </td>
  <td style="width: 125px;" data-report="18109599-1516219070.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>17-01-2018,19:57</label>
    </div>
  </td>
  <td style="width: 30px;" class="listing_cell">
    <div class="">
      <input data-report="18109599-1516219070.html" type="button" class="removeButton buttons delete_report" value="x">
    </div>
  </td>
</tr>

dynamically added item

<tr id="18109599-1516219273.html" data-report="18109599-1516219273.html" class="select data-row">
  <td style="width: 300px;" data-report="18109599-1516219273.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>Discharge Summary</label>
    </div>
  </td>
  <td style="width: 125px;" data-report="18109599-1516219273.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>17-01-2018,20:01</label>
    </div>
  </td>
  <td style="width: 30px;" class="listing_cell">
    <div class="">
      <input type="button" data-report="18109599-1516219273.html" class="removeButton buttons delete_report" value="x">
    </div>
  </td>
</tr>

I usually do `$(document).on('click', '.myclass', function(e) {});`. — dokgu, Jan 17 '18 at 21:11
This question has been asked before: https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements. The top answer has a few good suggestions — Rohan Varma, Jan 17 '18 at 21:15

JGoodgive · Answer 1 · 2018-01-31T19:39:46.310

Seems you are doing a business app. Consider adding a single listener closer to the body and adding a data-clicked attribute with the call you want to make. That lets you scale without exploding your listeners all over the page. Adds performance and you don't have to add listeners to new elements.

Short road: add .onclick class to all the stuff you listen to and the

$(".criteria:not('.onclick')).on("click", somefunction);

EDIT: Long road: I made a library that lets you to what I explained. There is a new JSBin example here. Basically you just add attributes to your html is automatic. This way it works with all new html you generate without needing any new listeners.

It also supports both mouse and touch, as well as swipes and long press. It also lets you control preventDefault and stopPropagation as well as programmatically adding and removing events.

Example from jsbin:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<div id="myOther" swipe="alert('you swiped ' + touch.swipeInfo.direction + ' on ' + this.id);"> 
    Swipe here 
</div>
<div id="presser" once press="alert('you long pressed');"> 
    Long press here 
</div>
<div id="outer"> 
    Tap here
    <div id="inner1" tap="alert('you tapped the first inner div and it will bubble');">
        Tap here
    </div>
    <div id="inner2" stopPropagation tap="alert('you tapped the second inner div and it doesnt bubble');">
        Tap here
    </div>
</div><body> 
<script src="https://unpkg.com/goodtap"></script> 
  <script>
      var tap = goodtap.init();
    tap.on(document.getElementById("outer"), "tap", (event, target, touch) => alert("you tapped " + target.id));

  </script>
</body>
</html>

I also created a npm module for it available here

dynamic items not triggering on (.on("click") event

1 Answers1