Refresh DOM after insert in jQuery
Let's say I am using jQuery to load new content into a specific DIV element. If now I want to catch events from within this DIV element, I assume the DOM needs to be updated somehow? What's the best way to handle this?
Edit: Here's an example of what I mean:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$(".edit").click(function(){
$(this).parent().load("edit");
});
$(".view").click(function(){
$(this).parent().load("view");
});
});
</script>
</head>
<body>
<div class='someid'>
<input type='submit' class='edit' value='Edit'>
</div>
</body>
</html>
where the file edit
at the same level contains
<input type='submit' class='view' value='View'>
and the file 'view' contains
<input type='submit' class='edit' value='Edit'>
If you try this, you will see that the first time you click the Edit button, the button changes to View, but then it doesn't change anymore. Why is this?
source to share
Since jQuery 1.7.x the .live () method is deprecated. Use .on () to attach event handlers. If you are using an older version, you should use .delegate () , preferring .live () .
As mentioned in the help, the format doesn't change much, as shown in this example:
$ (selector) .live (events, data, handler); // jQuery 1.3+
$ (document) .delegate (selector, events, data, handler); // jQuery 1.4.3+
$ (document) .on (events , selector, data, handler); // jQuery 1.7+
So since 1.7.x, delegate and live have been replaced with .
source to share