如何將JQuery應用於PHP生成的HTML？

我有一個PHP文件正在生成HTML元素，並且在頁面加載時從AJAX調用。我期待的是將JQuery應用到動態生成的元素，因此每次從PHP文件生成的標籤都會被點擊。我嘗試將JQuery代碼放在PHP文件中並將其回顯出來，但那不起作用，我也將代碼放在HTML頁面中，AJAX被調用的地方，但那也沒用。如何將JQuery應用於PHP生成的HTML？

在我的HTML我有：

<body onLoad="javascript:getLabels();">,

這需要通過AJAX的PHP文件：

function getComments() { 
    var thePage ='loadLabels.php'; 
    ...

的PHP文件作爲該行：

echo '<label id="labellink" class="ldClass">Label </label>';

這可能是更然後在頁面中的一個標籤一旦加載，但所有在他們的<form>，所以我需要使用JQuery所以一旦labe ls被加載，我點擊它們，我可以做出一些事情。

來源

2012-05-10 Graeme Leech

請提供一些代碼。 – afuzzyllama

這是我的代碼，因爲它是在莫，在我的HTML頁面我有這樣的行：<體的onLoad =「JavaScript的：getLabels（）;」>，這要求通過AJAX PHP文件：功能getComments（） { var thePage ='loadLabels.php'; ......和PHP文件作爲行：echo'標籤';這可能不止是一次加載後的頁面中的一個標籤，但都在其中一個

你是不是使用相同的ID作爲你的所有標籤？ –

編輯謝謝你糾正我。由於折舊，我暫時還沒有使用它。

我敢肯定，這算作更多的是「黑客」不是一個解決方案，我會公開歡迎downvotes如果有必要，但你可以把成功函數內後AJAX功能。

此外，舊版本的jQuery使用了一個名爲.live()的函數，該函數將查找是否在DOM中的元素。它在最新版本的jQuery中被貶低了，但如果你願意採取這種飛躍，我知道它在1.5版本中有效。（我在談論像$(a).live('click', function() { });）。

爲了記錄，我很樂意發佈此評論而不是答案，但我還沒有足夠的街頭信譽。

來源

2012-05-10 19:29:51

這不是你如何使用'.live（）'。正確的方法是$（'a'）。live（'click'，function（）{}）;'。請參閱其他幾個答案，以獲取更新的方法。 –

~~你想要的是jQuery的「活」 http://api.jquery.com/live/~~

編輯：你想。對（）jQuery中的自.live新版本（）現在已經貶值：http://api.jquery.com/on/

見下面的評論獲取更多信息。

來源

2012-05-10 19:30:30 Danny

其實他想'.on（）'。 '.live（）'在最新版本的jQuery中已被棄用。 –

優秀信息！我沒有意識到這種變化。 – Danny

.live（）已棄用，應使用.delegate（）替代。 – Clement

-1

使用.delegate（）是我曾經使用過的最好的方法。

參閱http://api.jquery.com/delegate/

來源

2012-05-10 19:35:25 Imdad

'.delegate（）'的功能也被最新版本的jQuery中的'.on（）'所取代。 –

它沒有被壓制。相反，'.on'在jQuery的新版本中引入了酷命名。但**委託**是一個標準名稱。我們應該遵循標準。 – Imdad

什麼？不被壓制，*被取代*。它直接在文件中說明它已被取代。 'on（）'結合了'delegate（）'以及'live（）'和'bind（）'的功能。這不僅僅是爲了「酷命名」。 –

.on()（Documentation）提供了創建用於動態元素，創建處理程序時，可能不一定存在處理程序的方法。

要使用.on()，您需要將處理程序附加到DOM樹中較高的非動態對象。點擊將從子元素向上傳播，此時與.on()相連的處理程序（委託）將使用提供的過濾器來查看點擊是否源自正確的對象（這可能是您的動態對象）。

$('body').on('click', '.dynamic_element', function() { 
    // Handler code 
});

在這種情況下，我用body，因爲它不會消失，並採取處理它。只要它是一個靜態元素，就可以將該處理程序附加到作爲.dynamic_element的祖先的任何對象。越接近越好，但如果你的頁面非常有活力，body就可以工作。

背後.on()整個想法是，處理程序必須被連接到現有的DOM元素。如果一個對象還不存在，你不能附加一個處理程序，如果你的元素被刪除，處理程序也會被刪除。這就是爲什麼$('.dynamic_element').click()不起作用，除非.dynamic_element已經存在。所以，用.on()，我們只是附加處理的東西，我們知道確實存在（而不會消失）。這個處理程序被稱爲「委託」。它監視來自其子對象的事件，這些對象根據DOM元素的性質在樹上傳播。

來源

2012-05-10 19:38:56

任何關心downvote評論？ –

@ jeroen：你是什麼意思？要在委託上下文中使用'.on（）'，您需要在祖代（委託）上調用它，並將選擇器作爲過濾器傳遞。如果直接使用'.on（）'（不帶選擇器），則相當於'.bind（）'，它不適用於將來動態添加的對象。看例子：http://jsfiddle.net/5B4Kd/ –

你是對的，不知道我在想什麼... – jeroen

有2種方式來實現你想要什麼。

1：附加事件到你的AJAX調用來檢索內容的onSuccess內部的鏈接。這樣當新的內容添加到DOM時，您將把必要的事件附加到這些特定元素。

2：推薦的解決方案是使用事件委託。基本上，不是將事件附加到特定元素，而是將單個事件附加到父元素容器，並且當事件被觸發時，基於調整點擊目標（如果它本身具有特定類），則執行特定動作。這是一種用於處理流體/可變內容的技術，而不必針對特定元素進行重新組合。 jQuery的。對（）API方法典雅提供了這樣的解決方案：http://api.jquery.com/on/

例如：

$("#container").on("a.changeColor", "click", function() { 
    $(this).toggleClass("newColor"); 
});

您委託/事件附加到用id =「容器」的父元素，告訴它你想所有使用「changeColor」類的子元素錨點元素切換「newColor」類。即使在更新並更改#container元素的內部內容後，具有類「changeColor」的新元素仍將繼承點擊時的行爲。

來源

2012-05-10 19:44:46 Clement

只是動態的實例創建的元素和約束的onload事件

var a = $("<a>").attr('href','#') 
       .attr('class','elem') 
       .text('click me') 
       .prependTo('body'); 
$(document).on("click", "a.elem", function(e){ 
    e.preventDefault(); 
    alert("Goodbye!"); 
});

來源

2012-05-10 20:07:54 Conex

如何將JQuery應用於PHP生成的HTML？

回答

相關問題