帶有Fancybox的jQuery動態創建的元素。只適用於第二次點擊，從不第一次

我使用Fancybox和幻燈片放映。我有一個幻燈片，「動態」加載數據庫中的項目。帶有Fancybox的jQuery動態創建的元素。只適用於第二次點擊，從不第一次

<div id="#slideshow"> 
    <div id="#slide-description"> 
     <a href="http://localhost/test.php">Fancybox here</a> 
    </div> 
</div>

注意：#slideshow div內的所有內容都是由jQuery動態生成的。

我的JavaScript看起來像這樣：

$("#slide-description").on('click', 'a', function() { 
    console.log('triggerd click!'); 
    $(this).fancybox({ 
     type: "ajax", 
     ajax: { 
      dataFilter: function(data) {     
       return $(data).find("#portfolio-info"); 
      } 
     }, 
     onComplete: function(){ 
      console.log('done.'); 
     } 
    }); 
    return false; 
});

我的問題是，它只有當我點擊兩次工程 - <a href="http://localhost/test.php">Fancybox here</a>。

當我第一次點擊鏈接時，triggered click!被記錄在控制檯中，但沒有GET請求。然後當我第二次點擊它時，它就起作用了！

控制檯：

triggerd click! /* 1st click */ 
GET http://localhost:8888/raydar/portfolio/frucor-1/ 200 OK /* 2nd click */ 
triggerd click! /* 2nd click */ 
done. /* 2nd click */

任何答覆將不勝感激，因爲我已經花了幾個小時這一點。

來源

2012-07-09 wenbert

如果是動態生成的內部#slideshow的一切，這意味着你在摧毀和重建＃滑描述也是。所以你不想把你的聽衆綁定到那個。爲什麼不把監聽器綁定到#slideshow本身？ – 2012-07-09 04:16:59

感謝Greg的回覆。（'click'，'a'，function（）{...'和'$（「＃slideshow a」）。on（'click'，function（） {...'並且兩者都不起作用，當我這樣做的時候，問題是''標籤中的'href'被跟蹤/執行，並且它會進入鏈接而不是加載到Fancybox中。 – wenbert 2012-07-09 04:27:46

如果使用fancybox v1.3.4和動態添加的元素，您也可以查看http://stackoverflow.com/a/9084293/1055987 – JFK 2012-07-09 05:45:15

正如在評論部分的問題的答覆：

如果問題是該鏈接被跟蹤，你需要防止默認行爲：

$("#slideshow").on('click', 'a', function(e) { 
    e.preventDefault(); 
    /* the rest */ 
});

請注意，您還可以使用return false;在函數的末尾，這可以防止默認行爲並停止傳播，如果這是您需要的。

來源

2012-07-09 04:13:58

再次感謝。我已將「綁定」放在$（「＃slideshow」）.on（'click'，...'按照你的指定，但仍然有問題 - 它只能在第二次點擊時起作用，但不會在第一次起作用。 – wenbert 2012-07-09 04:41:23

我有點瞎了一點，實際上沒有Fancybox。 $（this）引用是否適合？在上下文中，$（this）是一個jQuery包裝的錨。是否正確的事情是fancybox'd？也是blind blind的一部分：數據究竟包含什麼？它是jQuery的wr apped？ – 2012-07-09 04:43:16

非常感謝Greg。由於您的意見和答案，我可以在第一次點擊時正確「獲取」網址。我將很快爲其他人發佈答案。再次，謝謝！ – wenbert 2012-07-09 04:54:28

Greg Pettit的評論和回答讓我想到了如何以另一種方式做到這一點。我重新閱讀Fancybox的文檔，發現對於Ajax請求，有一個url選項。

從http://fancybox.net/blog：

$("#login_form").bind("submit", function() { 

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) { 
     $("#login_error").show(); 
     $.fancybox.resize(); 
     return false; 
    } 

    $.fancybox.showActivity(); 

    $.ajax({ 
     type  : "POST", 
     cache : false, 
     url  : "/data/login.php", /*i'm talking about this*/ 
     data  : $(this).serializeArray(), 
     success: function(data) { 
      $.fancybox(data); 
     } 
    }); 

    return false; 
});

就這樣，我想出了這個：

$("#slideshow").on('click','#slide-description a', function() { 
    $.fancybox({ 
     type: "ajax", 
     ajax: { 
      type: "GET", 
      url: $(this).attr("href"), /*we get the URL from "#slide-description a" and load it*/ 
      dataFilter: function(data) {     
       return $(data).find("#portfolio-info"); 
      } 
     }, 
     onComplete: function(){ 
      console.log('done.'); 
     } 
    }); 
    return false; 
});

來源

2012-07-09 04:59:49 wenbert

對！很高興我可以幫助一些小方法。 – 2012-07-09 05:20:58

帶有Fancybox的jQuery動態創建的元素。只適用於第二次點擊，從不第一次

回答

相關問題