jQuery/Ajax - 選擇器不工作

當我使用jQuery.ajax（）將HTML內容從某個PHP加載到頁面上的某個元素上時，jQuery選擇器無法在該加載的HTML中的元素上工作。jQuery/Ajax - 選擇器不工作

這是一個常見問題，還是我必須舉一個例子？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script src="../jquery.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="htmlcontent"> 
     <a href="#">Blah</a><br /> 
     <a href="#">Bleh</a><br /> 
    </div> 
    <div id="replacecontent"> 
     <br /><a href="#">Replace content</a> 
    </div> 
    <script type="text/javascript"> 
     $("#htmlcontent a").click(function() { 
      alert("Clicked on a link!"); 
     }); 
     $("#replacecontent a").click(function() { 
      $("#htmlcontent").html('<a href="#">This doesn't alert(). Why?</a>'); 
     });   
    </script> 
</body>

好吧，這是不是太硬。 :)

來源

2011-06-25 A-OK

*「我必須彙總一個例子」*：是 –

您將不得不向我們展示代碼，因爲我在.ajax回調的頁面上創建了html，然後在稍後選擇了它。 –

最好展示一個例子。但是，如果元素在DOM中，那麼jQuery選擇器應該可以工作。 – Jivings

我相信你的選擇器就好。這可能是事件處理程序不正確。你使用.bind（）或.click（）？一個常見的問題是，您無法使用這些標準事件綁定到頁面上尚不存在的元素。您可能需要查看.live()，它爲與當前選擇器匹配的所有元素（現在爲以及未來）附加事件處理函數。

那麼試試這個：

$("#htmlcontent a").live('click', function() { 
     alert("Clicked on a link!"); 
    });

來源

2011-06-25 11:55:35 Kon

工作正常！謝謝！ –

很高興幫助... – Kon

您修改DOM後，因爲被附元素將被操縱或刪除選擇器不工作。如果你想繞過這個，你將不得不使用$.live()或$.delegate()。

這是.live()事件附件的解釋：

的.live（）方法能夠影響尚未通過使用事件委派的加入到DOM 元素：綁定到祖先元素的處理程序負責事件，這些事件在其後代中被觸發。處理程序傳遞給 .live（）永遠不會綁定到一個元素;相反，.live（）將特殊的處理程序綁定到DOM樹的根。

來源

2011-06-25 11:56:45 Shef

您試圖選擇的元素在綁定click()事件時不在DOM中。

看看jQuery.delegate()：基於一組特定的根元素，爲現在或未來與選擇器匹配的所有元素附加一個處理程序到一個或多個事件。

$("#replacecontent").delegate("a", "click", function() { 
     $("#htmlcontent").html('<a href="#">This will work now alert(). Why?</a>'); 
    });

我喜歡.delegate()過.live()因爲它的效率更高，給我們一個簡單的方法來指定選擇的上下文。使用.live()，必須將整個文檔上的每一次點擊與指定的選擇器進行比較，.delegate()只是$("#replacecontent")容器中的元素。

來源

2011-06-25 11:59:36

jQuery/Ajax - 選擇器不工作

回答

相關問題