如何在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事件

回答

相关问题