1

我想从 JSON 数据和 appendTo #demo 中获取图像 url（#demo 中的 img）。

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

但是“ $('#demo img').bind('click', function() ”永远不会被触发。所以我无法获取img url并转储到#log进行调试。

但是如果我在 #demo 中写入一些静态的 img 元素，就可以触发点击功能。

是“appendTo”的原因吗？

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

2 回答 2

1

对于动态生成的元素，事件应该从元素的静态父级之一委托，您可以使用on方法。

$('#demo').on('click', 'img', function(){
  // ...
})
于 2012-09-01T15:13:32.450 回答
1

不要再使用bind了。从 1.7 开始，使用.on()委托事件处理程序。

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

更新：

live()并且bind()工作方式不同：live()也适用于不存在的元素或动态创建的元素，但bind()只会为当前存在的元素绑定事件处理程序。阅读更多

.delegate()用于事件委托，但.on()它是它的改进版本，将被创建用于干净的编码和bind()组合delegate()

其他好问题：

  1. jQuery：live（）与委托（）
  2. .delegate() 与 .on()
  3. Jquery live() 与委托()
于 2012-09-01T15:14:26.333 回答