使用jQuery更改動態創建的div內容

我有一個記錄表。每個記錄旁邊都會有一個按鈕。在點擊該記錄旁邊的按鈕時，應該執行jQuery AJAX調用。

<script language="JavaScript" type="text/javascript"> 
<!-- 
function swapContent(cv) { 
    $("#myDiv").html('<div align="center"><img src="images/loader.gif"/></div>').show(); 
    var url = "process.php"; 
    $.post(url, {contentVar: cv} ,function(data) { 
     $("#myDiv").html(data).show(); 
    }); 
} 
//--> 
</script>

相關的HTML：

<div id="myDiv" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('do_stuff');"><img src='images/icon.png' border='0'></a></div>

當我點擊HTML鏈接時，格「myDiv」的內容被改變出於對Ajax調用的輸出process.php。這一切都很好，但我會有幾十個這樣的div，我需要能夠不僅使用參數cv調用swapContent函數，還要傳入一個參數，以便div更改其內容。

我相信我的錯誤只是基於對JS語法的無知。舉例來說，我已經做到了這一點：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function swapContent(thediv,cv) { 
    $(thediv).html('<div align="center"><img src="images/loader.gif"/></div>').show(); 
    var url = "process.php"; 
    $.post(url, {contentVar: cv} ,function(data) { 
     $(thediv).html(data).show(); 
    }); 
} 
//--> 
</script>

，但我不知道這是再處理變量thediv作爲一個字符串時，它應該是一個對象或可能是什麼問題。

我將不勝感激您的任何幫助！

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div1','do_stuff');"><img src='images/icon.png' border='0'></a></div> 
... 
<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div2','do_stuff');"><img src='images/icon.png' border='0'></a></div>

來源

2012-05-14 Bruce the Hoon

當你逝去的div id來功能所以，代替$(thediv) - >$("#"+thediv)將工作

來源

2012-05-14 06:09:52 Imdad

「arrrrrrrrrrgh」難道你不討厭它，當它是一個愚蠢的語法錯誤嗎？調試這個過程非常艱難。我剛剛使用Firefox Webdeveloper工具欄的錯誤控制檯。有沒有更好的辦法？例如，我沒有被給予「div未找到」的錯誤，或者有人指出我正確的方向。無論如何，謝謝！ –

@Bruce - jQuery的工作方式，'$（someselector）'函數將返回一個包含匹配'someselector'的_zero或more_元素的jQuery對象，所以沒有真正適用的「未找到div」的概念。錯誤。（雖然你可以測試多少個元素匹配，因爲生成的對象具有'.length'屬性。） – nnnnnn

@Bruce，在FF中安裝FireBug插件，然後安裝FireQuery插件。這是調試jQuery代碼的更好方法。我不能說特定的這種情況，但它絕對是更好的工具。 – Imdad

-1

清楚你的div的HTML作爲添加新的div等之前：

$('#myDiv').html('');

來源

2012-05-14 06:08:14

你已經完成了大部分的工作:)。現在使用this對象。 http://jsbin.com/evirun/2/edit#source（創建一個例子來告訴你如何能找出正確的調用div元素）

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div> 

<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

現在你的腳本：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function swapContent(obj,cv) { 
    $(obj).parent().html('<div align="center"><img src="images/loader.gif"/></div>').show(); 
    var url = "process.php"; 
    $.post(url, {contentVar: cv} ,function(data) { 
     $(obj).parent().html(data).show(); 
    }); 
} 
//--> 
</script>

this實際上通過其調用該方法的DOM元素。然後在你的腳本中使用這個元素。

編輯

我錯過了anchor標籤內div。將腳本更改爲使用parent。

來源

2012-05-14 06:16:05

如果您在發送downvote時發表評論，我將不勝感激。這可以幫助我理解下調原因。 –

請勿將onclick和onmousedown處理程序內聯。我建議你使用（HTML5）data-屬性來存儲你目前投入的cv參數的值：

<div id="div1" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div> 
... 
<div id="div2" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>

...然後綁定使用jQuery像這樣的點擊次數：

$("a[data-cv]").click(function() { 
    var thediv = $(this).parent(), 
     cv = $(this).attr("data-cv"); 

    thediv.html('<div align="center"><img src="images/loader.gif"/></div>'); 

    var url = "process.php"; 
    $.post(url, {contentVar: cv} ,function(data) { 
     thediv.html(data); 
    }); 

    return false; 
});

該代碼使用has attribute selector來獲取有data-cv屬性並綁定一個單擊處理程序，以這些要素的錨元素。在處理程序中，this將成爲單擊的特定錨點，因此在標記中給出關聯的div元素實際上是錨點的父元素，您可以使用$(this).parent()來獲取對正確div的引用（對於其他可以使用其他html結構DOM遍歷方法，如.prev()或.closest()等）。

在點擊處理程序結束時的return false;停止默認的錨點擊行爲。

另請注意，對於您當前顯示的代碼，您不需要.show()方法，因爲div已經顯示。

來源

2012-05-14 06:29:28 nnnnnn

使用jQuery更改動態創建的div內容

回答

相關問題