2016-03-30 66 views
0

背景我的頁面基於SQL數據庫的行創建對象列表。對於每個對象,動態生成一個DIV,其中包含一些項目,包括LinkBut​​ton和最初隱藏的另一個子DIV。我想要鏈接按鈕來切換子DIV的隱藏屬性。 JavaScript不是動態生成的,並且包含在ASPX頁面中。在ClickClick上添加JavaScript到動態生成的asp按鈕

問題我不知道如何使這個生成的LinkBut​​ton fire JavaScript包含在ASPX頁面中並傳入正確的DIV ID。

我猜我需要一個屬性添加到該按鈕,像這樣:

myButton.Attributes.Add(reference to JS function + parameter of DIV's ID) 

也許就像:

myButton.Attributes.Add("onclick", "Show_Hide_Display('"<%="' +idString+ '".ClientID%>"')"); 

當按鈕被賦予了JS的onClick處理程序指向的屬性到函數「Show_Hide_Display」和作爲渲染ID計算的DIV's ID的參數。這個語法雖然不正確。

我該如何編寫它,以便它調用「Show_Hide_Display」並傳遞當前子DIV的ID?所有的DIV具有相同的ID除了一些我想添加一個調用按鈕引用它們的行號,例如「‘myDiv_’+ counter.ToString」

中的JavaScript:

function Show_Hide_Display(divID) { 

     var div = document.getElementById(divID); 
     var style = document.defaultView.getComputedStyle(div); 
     var display = style.getPropertyValue('display'); 

     if (display == '' || display == 'block') { 
      div.style.display = 'none'; 
     } else { 
      div.style.display = 'block'; 
     } 

    } 

回答

1

使用以下格式...

myButton.Attributes.Add("onclick", "Show_Hide_Display(this.id);"); 

上述語法允許調用函數與ID作爲其參數。

建議: 嘗試編寫一個不依賴於控件的生成ID的通用函數。

如果這樣對你的需求無用,那麼請發佈你的代碼,這可能會給我一個更好的主意。

+0

這實際上是我最終採用的路線。但是,將你的答案標記爲未來有類似問題的人的答案。謝謝。 – Ryan

1

如果您使用的是jQuery,那麼您可以使用jQuery委託方法。

$(document).on("click", "div.parent", function(){ 
    var subDivId = getSubDivByParent(this); 
    Show_Hide_Display(subDivId); 
}; 

您需要根據您的DOM結構實現getSubDivByParent。

如果你不使用jQuery,你需要自己附加事件。對於每個動態生成的元素。您需要在服務器代碼中手動添加以下腳本來註冊事件。

... your html code ... 
<script> 
var elem = document.getElementById('new-created-element'); 

elem.addEventListener("click", function(){ 
    var subDivId = getSubDivByParent(this); 
    Show_Hide_Display(subDivId); 
};) 
</script> 
+0

我沒有使用JQuery,我有一個JavaScript函數接收DIV的ID,然後通過CSS顯示/隱藏它。這個功能在其他地方使用並且工作正常。我需要能夠在動態生成的按鈕上調用它,但不知道語法。 – Ryan

+0

所以你需要在服務器上添加腳本標籤。該腳本用於註冊您新創建的元素。如'

html code
' –

+0

不,該腳本已經在頁面上並且正常工作。我需要我的新按鈕來調用該函數。 – Ryan

0
My suggestion is use jquery to achieve the functionality. 

My solution works if you want to toggle the immediate div for the link.just call onclientclick method to toggle the div. 

in linkbutton onclientclick="Show_Hide_Display(this)" 

function Show_Hide_Display(id) { 
    $(id).next('div').toggle(); 
} 

I hope this helps you .. Thanks 
+0

我可以使DIV隱藏/可見。我需要新創建的按鈕來調用執行此操作的JavaScript函數。 – Ryan