jQuery live功能不是，運行良好

Question

我使用Ajax生成內容，因此需要使用.live()將函數附加到生成的鏈接上的click事件。它似乎不工作，不幸的是，我不知道爲什麼。我試着把它放在準備好的環境裏面和外面;沒有運氣。當我僅僅使用$('a').click()時，它正在工作，但對於從Ajax中取出的鏈接無效。有什麼想法嗎？

$(document).ready(function(){ 
    $('#content a').live('click', function(){ 
     var moveIt = $("#content").outerWidth(); 
     alert(moveIt); 
     $('#content').animate({'maxWidth': '+=' + moveIt/2 + 'px', 'left': '6%'}, 'slow'); 
    }); 

    $('a.back').live('click',function(){ 
     $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400); 
    }); 
}); 

而這裏的HTML：

<section id="content" class="textiles"><!--content start--> 
<div id="ajax-container"> 
    <div id="ajax-content"><!--test--> 
     <h1>Installations</h1> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/light-fixtures" title="light&nbsp;fixtures"><img src="http://www.qp2creative.com/clients/dfrank/images/51t.jpg" alt="Seating Area with Light Fixtures" height="64" width="140"></a> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/scad-fibers-installation" title="SCAD fibers&nbsp;installation"><img src="http://www.qp2creative.com/clients/dfrank/images/49t.jpg" alt="Installation in Context" height="64" width="140"></a> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/other-gallery" title="fashion 2008&nbsp;photoshoot"><img src="http://www.qp2creative.com/clients/dfrank/images/47t.jpg" alt="fashion's backdrop" height="64" width="140"></a> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/qp2-creative-gallery" title="QP2 Creative&nbsp;Gallery"><img src="http://www.qp2creative.com/clients/dfrank/images/41t.jpg" alt="QP2 Creative gallery" title=""></a> 
     </div> 
    </div><!--end ajax container--> 
</section><!--end content--> 

Answer 1

body標籤內的JavaScript代碼搞亂了頭標籤中的腳本。在您的正文標籤 a 點擊約束「返回假」。並停止進一步調用任何「單擊」綁定。

我在代碼中發現了三個問題。糾正它後，我得到了警報框。

1. 將代碼封裝在$(document).ready(function(){ });中，就像您在您的問題中一樣（但它不在演示網站中）。
2. 在你body標籤的relink: function() { - 評論說： 「返回false;」 和

3. 糾正分號 smd_ajax.spinit（1）丟失;

   if ((site_url.indexOf(url.host) >= 0) && (bindit == true)) { 
       smd_ajax.spinit(1); //HERE 3rd Edit. 
       jQuery(this).unbind(); 
       smd_ajax.grab(this.href); 
       //return false; //HERE 2nd Edit. 
   } 
   

您可以使用preventDefault();停止默認行爲。

$(document).ready(function(){ 
    $('#content a').live('click', function(e){ 
     var moveIt = $("#content").outerWidth(); 
     alert(moveIt); 
     $('#content').animate({'maxWidth': '+=' + moveIt/2 + 'px', 'left': '6%'}, 'slow'); 
     e.preventDefault(); //Hyperlink won't load page link. 
    }); 
    $('a.back').live('click',function(){ 
     $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400); 
    }); 
}); 

Answer 2

你已經採取了看看.delegate()？它幾乎與.live()一樣，但允許您指定一個額外的選擇器來過濾任何觸發的元素。

$('#content').delegate('a', 'click', function() { 
    // code here 
} 

不知道爲什麼你的具體的例子不工作，但如果你有至少jQuery的1.4.2，嘗試更新到.delegate()。

Answer 3

我看了一下你的網站 - 我真的不能解釋您的警報不工作，但似乎Ajax實現是一個有點令人費解。我想你可能會簡化它，並完全避免怪異的委託/現場問題。

您是否考慮過使用簡單的jQuery.ajax或jQuery.load函數來更改動態內容？我知道這些函數有回調函數，可以讓你在ajax調用完成後運行後續的「成功」函數。也許其中一個回調將是一個運行調整大小功能的好地方？