Question

This is the workflow:

1. Add elements dynamically to a div container
2. Register click event for this elements (using jquery custom function)
3. Trigger the element event

According to the flow above, I can’t get the new element event works, because it never is triggered. This is my scenario:

http://jsfiddle.net/9Ru76/1/

The idea is that when you click over “element” its ID attribute should be printed in .log div

Edit:

I have tested all answers and all of them work fine 🙂

Answer 1

In jsFiddle, the code is automatically put in a $(document).ready block. So, what’s happening is your $(document).ready is ran immediately. This means it’s ran before jQuery.fn.showID is set.

Also, $(".element").showID();​ binds the event to .elements that exist at that time. New elements won’t have the event bound. You need to either use event delegation (which makes the showID plugin useless), or call showID after adding the element (making sure not to re-bind to old elements).

P.S. Inside a jQuery plugin this is already a jQuery object, no need to use $(this).