StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You've run into a fairly common issue with event binding.</p> <pre><code>$("a.view-more").bind('click',function(event){ </code></pre> <p>The above line of code that you wrote attaches an event listener to the DOM elements available at that time. This is why the new elements added to the DOM do not respond to the event; because they don't have the event listener attached.</p> <p>To work around this we can use something called event delegation. This works by attaching the event to a parent of the DOM elements that you wanted to listen for the event on. We can then work out which child the event started on when the event eventually propagates to the parent.</p> <p>jQuery makes this very easy to do. You can use the <code>delegate()</code> method but I suggest you use the <code>on()</code> method which is the method that handles all event operations in jQuery. The others such as <code>click()</code>, <code>mouseover()</code> and <code>bind()</code> are just aliases of <code>on()</code></p> <p>Anyway, to delegate an event we need to specify a selector for the parent which the event will attach to, and a selector for the elements we are actually interested in. So that line of code will now look like this:</p> <pre><code>$("body").on('click', "a.view-more", function(event){ </code></pre> <p>You should really use something other than body but this is just an example.</p> <p>Further reading: <a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a></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