How to update DOM after calling append() ?
Hello together,
I'm pretty new to jquery and I got a problem you can probably help.
Here is some example code:
-
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
var thumbArr = new Array(
"./thumb_1.jpg",
"./thumb_2.jpg",
"./thumb_3.jpg",
"./thumb_4.jpg",
"./thumb_5.jpg");
$(document).ready(function(){
displayThumbs();
$("img").click(function(event){
$("#imageBox").append("<img class='thumbnail' src='"+ thumbArr[3] +"'>");
});
});
function displayThumbs(){
for(var i=0;i<3;i++){
$("#imageBox").append("<img class='thumbnail' src='"+ thumbArr[i] +"'>");
}
}
</script>
</head>
<body>
<div id='imageBox'>
</div>
</body>
</html>
The problem is when a new <img> element is appended,it is displayed but the $("img").click(function... is not available for all newly appended elements.
Do I have to update the DOM somehow, or how can I solve this problem?
Thank a lot for your help
Ronny