Can not control the item which create by appendTo function

Question

I want to get the image url (the img in #demo) wich I parser from the JSON data and appendTo #demo.

I can see the picture which I get from flickr after parser the JSON data and appendTo to #demo.

But the "$('#demo img').bind('click', function()" never be trigger. So I can not get the img url and dump to #log to debug.

But If I write some static img elements into #demo , the click function can be triggered.

Is the "appendTo" cause it ?

<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ch13_4_2</title>
<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="cordova-1.5.0.js"></script>
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile.min.js"></script>

<script>
function onDeviceReady() {
   $('#shoot').bind('click', function() {
     $("#demo").empty();
      $("#log").empty();

      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tagmode=any&format=json&jsoncallback=?&tags=baby&id=82216313@N00" ,
              function(data) {
                $.each(data.items, function(i,item){

                var photoString = "<a href=\"#\"><img src=" + item.media.m + "></a>";                
                 $(photoString).appendTo("#demo");

                  if ( i == 3) return false;
                });
              });             
   });   
} 

function onLoad() { 
   document.addEventListener("deviceready", onDeviceReady, false);
}   
</script>
</head>
<body onload="onLoad()">

<div data-role="page" id="home">   
   <div data-role="header" data-position="fixed">
     <h1>Andy's Flickr Search</h1>
     <a href="#" id="shoot" data-role="button" data-icon="search" data-inline="true">search</a>
   </div>


   <div data-role="content">
   <div id="log"></div>


     <div id="demo">

     </div> 

<script>

              $('#demo img').bind('click', function() {
                    $("#log").empty();
                    var img_link = this.src;                            
                    var photoString = "<img src=" + img_link + ">";                    
                    $('div #log').html(photoString);

           });  
</script>    


</div>   
</div>



</body>
</html>

The magic word is delegation? – adeneo Sep 01 '12 at 15:14 — adeneo, Sep 01 '12 at 15:14

score 1 · Accepted Answer · answered Sep 01 '12 at 15:13

1

For dynamically generated elements, events should be delegated from one of static parents of the element, you can use on method.

$('#demo').on('click', 'img', function(){
  // ...
})

answered Sep 01 '12 at 15:13

Ram

143,282
16
168
197

Hi , Thanks for your answer. But if I change to your code , the function can not be trigger on static img or appendTo img. – jchuang1977 Sep 01 '12 at 15:19
@user1640586 Hi, you are welcome, the event will be triggered for both static and dynamic images. – Ram Sep 01 '12 at 15:20
@underfined, thanks for your answer ,after I change jquery to 1.8 and your .on method , it works . – jchuang1977 Sep 01 '12 at 15:31

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

Do not use bind any more. As of 1.7, use .on() to delegate the event handler.

$('#demo').on('click', 'img', function() {
   // ...
});

Update:

live() and bind() worked differently: live() will also work for non existent elements or elements that are created on the fly but bind() will only bind the event handlers for currently existing elements. Read More

.delegate() was used for event delegation, but .on() is improved version of it and will created for clean coding and combination of bind() and delegate()

Can not control the item which create by appendTo function

2 Answers2