如何在javascript上的特定動態按鈕上調用onclick事件

我正在處理包含文本框和按鈕的usercontrol文件。如何在javascript上的特定動態按鈕上調用onclick事件

該控件在一個頁面上呈現多個記錄，從而動態創建並呈現文本框和按鈕。

我想調用一個javascript函數來驗證文本框是否有價值。我的問題是我無法確定哪個按鈕被點擊，因爲它是動態創建的。（因爲我將這個控件集成在父頁面gridview中，因此它變成動態的。）

請指教社區。我所假設的是我無法將索引設置爲在調用closure之前檢索的按鈕ID。

我嘗試了以下幾個可用的鏈接，但最後我在這裏發佈我的問題尋求具體的答案。

下面是我的代碼snipeet。

HTML：

function validateSubmit() { 
 
      var btn = document.getElementsByClassName('frmBtn').length; 
 
      var btnId = document.getElementById('<%=commentSubmitButton.ClientID%>').id; 
 
      
 
      for (var j = 1; j <= btn; j++) { 
 
       (function(j){ 
 
        
 
        btnId[j].onclick = function(){ 
 
         alert('INSIDE CLICK'); 
 
         
 
         var e = document.getElementsByClassName('frmTextBox')[j].value; 
 
         if (e == '') { 
 
          document.getElementsByClassName('lbl')[j].style.display = 'block'; 
 
         } 
 
        } 
 
       })(j); 
 
      } 
 
    }

<div class="frmContent"> 
 
\t <p style="float: right; padding-top: 2em;"> 
 
\t \t <asp:Button ID="commentSubmitButton" runat="server" Text="Submit" CssClass="frmBtn" OnClientClick="validateSubmit(this);" /> 
 
\t 
 
\t </p> 
 
\t <p> 
 
\t \t <label for="txtComment" class="frmLabels"> 
 
\t \t \t Type Comment Here 
 
\t \t \t 
 
\t \t \t <label id="lblStar" class="lbl" style="display:none;color:red;">*</label> 
 
\t \t </label> 
 
\t \t <asp:TextBox ID="txtComment" runat="server" Height="60" Width="75%" TextMode="MultiLine" CssClass="frmTextBox" ></asp:TextBox> 
 
\t </p> 
 
</div>

JAVASCRIPT：

來源

2017-06-20 Binoy

可能有這樣做的不同的方法。如果是我，我會利用點擊事件向上冒泡的事實。因此，我不會將onclick事件附加到單個元素，而是添加到共同的父級，onclick =「myfunction（event）」。事件對象會告訴你哪個元素實際上被點擊過（使用event.target）。 –

我想你讓我更接近我的問題。你能否提供相關的片段來解決我的問題？我感謝你的投入。 – Binoy

我很抱歉，因爲我無法從您的代碼中理解您的最終HTML是什麼樣的，但是，例如，您可以將onclick =「myfunction（event）」附加到您的頂級div。如果div內的任何內容被點擊，則該事件將冒泡到div。你可以對動態元素的ID進行編碼，這樣你就可以知道哪個按鈕被點擊了，並且從它的ID中知道如何找到相關的文本框。例如，按鈕的ID =「button_1」，而文本框的ID =「textbox_1」。只要確保在頁面上保持唯一的ID。對不起，我不能更清楚。 –

最後我想通了。

我不知道爲什麼我一直傾向於傳統的JavaScript方法，當這樣的事情可以很容易地實現與這麼好，如此先進的jQuery。我在上觀察到了一些概念，它幫助我使這個小東西在很少的幾行工作。這裏是我用jQuery寫的相關代碼。

它現在工作令人滿意。謝謝你們。

jQuery代碼

function validateSubmit(btnid) 
{ 
     //debugger; 
     var txtbox = $(btnid).parent().parent().find('.frmTextBox')[0]; 
     var lblRequired = $(btnid).parent().parent().find('.lbl')[0]; 

     if (txtbox.value == '') { 
      lblRequired.style.display = 'block'; 
      event.preventDefault(); 
     } else { 
      lblRequired.style.display = 'none'; 
     } 
    }

來源

2017-06-22 17:13:11 Binoy

如何在javascript上的特定動態按鈕上調用onclick事件

回答

相關問題