Jquery 无法控制由appendTo函数创建的项_Jquery_Appendto

Jquery 无法控制由appendTo函数创建的项

jquery

Jquery 无法控制由appendTo函数创建的项,jquery,appendto,Jquery,Appendto,我想从JSON数据中获取图像url（demo中的img），并将其附加到demo中在解析JSON数据并附加到#demo之后，我可以看到我从flickr获得的图片但是“$（'#demo img'）.bind（'click'，function（）”永远不会被触发。因此我无法获取img url并转储到#log进行调试但如果我在#demo中写入一些静态img元素，则可以触发单击功能是“附加物”引起的吗 <!DOCTYPE html> <html> <head>

我想从JSON数据中获取图像url（demo中的img），并将其附加到demo中

在解析JSON数据并附加到#demo之后，我可以看到我从flickr获得的图片

但是“$（'#demo img'）.bind（'click'，function（）”永远不会被触发。因此我无法获取img url并转储到#log进行调试

但如果我在#demo中写入一些静态img元素，则可以触发单击功能

是“附加物”引起的吗

<!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>


Ch13_4_2
函数ondevicerady（）{
$（'#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“，
功能（数据）{
$.each（data.items，function（i，item）{
var photoString=“”；
$（photoString）.appendTo（#demo”）；
如果（i==3）返回false；
});
});             
});   
} 
函数onLoad（）{
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
}   
安迪的Flickr搜索
$（'#demo img'）.bind（'click'，function（）{
$（“#log”）.empty（）；
var img_link=this.src；
var photoString=“”；
$（'div#log'）.html（photoString）；
});

对于动态生成的元素，事件应该从元素的一个静态父元素委派，您可以使用方法上的


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

不要再使用bind
。从1.7开始，使用来委托事件处理程序
$('#demo').on('click', 'img', function() {
   // ...
});


更新：
live（）
和bind（）
的工作方式不同：live（）
也适用于不存在的元素或动态创建的元素，但bind（）
将仅绑定当前存在元素的事件处理程序
.delegate（）
用于事件委派，但是.on（）
是它的改进版本，它将创建为干净的编码以及bind（）
和delegate（）的组合
其他好问题：



神奇的词语是授权？@adeneo:live->delegate->bind->on是这样吗，我think@Starx：我认为live和bind现在都不受欢迎。答案是on。@参考答案是肯定的，非常正确，请避免使用live（）
和bind（）
。它们可能会在将来的版本中被删除。您好，谢谢您的回答。但是，如果我更改了您的代码，则该函数不能在静态img上触发或附加到img上。@user1640586您好，欢迎您，静态和动态图像都会触发该事件。@underfined，谢谢您的回答，在我将jquery更改为1.8之后在你的方法上，它是有效的。