If you understand you correctly, you are trying to attach existing event handlers to future elements. According to the jQuery document:
Quote:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.
Let's do some experiments:
1. Non-delegate events, the slideToggle event will not be added to new paragraphs:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
// non delegate
$("div p").on("click", function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
return false;
});
});
</script>
</head>
<body>
<div style="background:yellow">
<p>This is a paragraph.</p>
<p>Click me and I'm gone.</p>
<button>Insert a new p element after this button</button>
</div>
</body>
</html>
2. Delegate event, the slideToggle() event will be added to future paragraphs.
Replace the non delegate block of code above with this one:
$("div").on("click", "p", function(){
$(this).slideToggle();
});
Quote:
Delegated events have the advantage that they can process events from descendant elements (new p in our example) that are added to the document at a later time. By picking an element (div in our example) that is guaranteed to be present at the time the delegated event handler is attached,
Refer:
http://api.jquery.com/on/[
^]