Databases
StackOverflow2013
Postsdbo
POHow do I add an Event Listener to a Dynamic Element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I add an Event Listener to a Dynamic Element?
    text
    copied!<p>I have the following HTML:</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Description&lt;/th&gt; &lt;th&gt;Actions&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;Item 1&lt;/td&gt; &lt;td&gt;Description of Item 1&lt;/td&gt; &lt;td&gt; &lt;a href="#" data-action="edit" data-item-id="1"&gt;Edit&lt;/a&gt; &lt;a href="#" data-action="delete" data-item-id="1"&gt;Delete&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;Item 2&lt;/td&gt; &lt;td&gt;Description of Item 2&lt;/td&gt; &lt;td&gt; &lt;a href="#" data-action="edit" data-item-id="2"&gt;Edit&lt;/a&gt; &lt;a href="#" data-action="delete" data-item-id="2"&gt;Delete&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>The table rows (<code>tr elements</code>) are added <strong>dynamically</strong>.</p> <p>I wire up a click event to all <code>Edit</code> links like this:</p> <pre><code>void wireUpTableEvents() { var editLinks = queryAll('#order-items table tbody [data-action="edit"]'); editLinks.forEach((element) { element.on.click.add((event){ print(element.attributes['data-item-id']); }); }); } </code></pre> <p>As said above, the table rows (<code>tr elements</code>) are added dynamically so the above code only works if I call <code>wireUpEvents</code> <strong>after</strong> I execute the method which adds the rows.</p> <p>Does anyone know the syntax or adding a event listener to elements using <code>DART</code>'s <code>on.click.add()</code> when the elements are dynamcially added in the future?</p> <p>I tried checking the DART documentation but the <a href="http://api.dartlang.org/docs/continuous/dart_html/ElementEvents.html" rel="nofollow"><strong>documentation on Event Listeners</strong></a> is blank.</p> <p>If I would be using jQuery I could be using something similar to:</p> <pre><code>$("#order-items table")on("click", "tbody [data-action="edit"]", function(){...}) </code></pre> <p>...but I want to write my sample app only using DART.</p> <p><strong>Edit</strong><br> Though <code>future</code> sounds great for callbacks it seemed slightly overkill for what I needed as there is no long running task in my scenario. </p> <p>The closest I was able to get to attach my event listener to a static element but processing the click events of future sub-elements was this:</p> <pre><code>void wireUpTableEvents() { var tableBody = query('#order-items table tbody'); // Attach Event Listener to the static tbody, which always exists. tableBody.on.click.add((event) { var clickedElement = event.srcElement; var itemId = clickedElement.attributes['data-item-id']; // Check if the clicked element was either one of the edit links or one of the delete links. switch (clickedElement.attributes['data-action']) { case 'edit': // Replace print with calling a method to process edit request for this item. print('processing edit click from item with id: $itemId'); break; case 'delete': // Replace print with calling a method to process delete request for this item. print('processing delete click from item with id: $itemId'); break; } }); }​ </code></pre> <p>The above code can execute before any of the actual <code>tr</code> elements are loaded and still works after the <code>tr</code> elements are loaded at some unknown later stage.</p> <p>I also found that it now covers any dynamically added row, pre-loaded ones as well as other dynamically added ones for new records etc.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload