1

JSONデータとappendTo#demoからパーサーを使用して画像のURL（#demoのimg）を取得したいと思います。

JSONデータをパーサーして#demoにappendToした後、flickrから取得した画像を見ることができます。

ただし、 " $（'＃demo img'）。bind（'click'、function（） "はトリガーされないため、imgurlを取得して#logにダンプしてデバッグすることはできません。

しかし、静的なimg要素を#demoに書き込むと、クリック機能がトリガーされる可能性があります。

「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

動的に生成された要素の場合、イベントは要素の静的な親の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（）とdelegate（）
  2. .delegate（）と.on（）
  3. Jquery live（）とdelegate（）
于 2012-09-01T15:14:26.333 に答える