This is the workflow:
According to the flow above, I can't get the new element event works, because it never is triggered. This is my scenario:
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 :)
You had the $(".element").showID(); outside the .create click handler so there was nothing to select, also you had your code in onLoad when it should be in no-wrap head.
showID will re-bind the event to the previous elements.
.showID().appendTo(. Now suppose that .element elements are already added becasue they come from removeClass('something').addClass('.element'). In this case, Does the event delegation works as the same way? PS: Do I need to open a new question?You can use event delegation
$(document).ready(function(){
$(".create").click(function(){
$(".container").append('<div id="4" href="#" class="element">element</div>');
});
});
$(document).on('click','.element', function(){
$(".log").html("id: " + $(this).attr("id"));
});
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).
