從腳本後加載的處理程序追加數據

Question

我製作了一個顯示用戶Facebook照片的網站。下面的代碼將照片附加到div「facebook-images」。這部分工作正常。我遇到的問題是在加載下面的javascript代碼後正在追加圖像;所以當瀏覽器讀取底部的點擊功能代碼時，不會創建處理程序「fb-image」，因此它不起作用。

我相信我需要在（）上使用jQuery，但是哪裏？我試圖在下面的代碼中的任何地方放上（）。我試圖用append綁定，我嘗試過直播（我知道這是貶值但值得一試）。沒有任何工作。

任何想法？

<div class="target"> 

</div> 

<div id="facebook-images"> 

</div> 

<script> 
    $.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function() { 
     $.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) { 
      $.each(data.data, function (i, face) { 
       $('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>"); 
      }); 
     }); 
    }); 

    $(".fb-image img").click(function() { 
     $(".target").append("<h1>hi</h1>"); 
    }); 
</script> 

Answer 1

解決此問題的最簡單方法是在圖像插入到頁面後添加點擊處理程序。

<script> 
    $.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function() { 
     $.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) { 
      $.each(data.data, function (i, face) { 
       $('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>"); 
      }); 
      $(".fb-image img").click(function() { 
       $(".target").append("<h1>hi</h1>"); 
      }); 
     }); 
    }); 

</script> 

---

您還可以使用委託的事件處理，如果你想要的。要做到這一點，您可以設置在一個共同的父事件處理程序，它在當時存在運行事件處理代碼.on()，你通過它傳遞一個選擇是這樣使用的.on()委派形式：

<script> 
    $.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function() { 
     $.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) { 
      $.each(data.data, function (i, face) { 
       $('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>"); 
      }); 
     }); 
    }); 

    $("#facebook-images").on('click', ".fb-image img", function() { 
     $(".target").append("<h1>hi</h1>"); 
    }); 
</script> 

代表作.on()的工作原理如下：

$(selector of static parent).on(event, selector that matches dynamic object, fn);