javascriptの特定の動的ボタンでonclickイベントを呼び出す方法

Question

私は、テキストボックスとボタンを含むusercontrolファイルを作成しています。

コントロールは、1ページに複数のレコードをレンダリングするため、テキストボックスとボタンを動的に作成してレンダリングします。

私は、テキストボックスに値があるかどうかを検証するためのjavascript関数を呼び出そうとしています。私の問題は、どのボタンが動的に作成されているのでクリックされたのか判断できないことです。 （親ページのグリッドビューでこのコントロールを統合しているため、動的になります）

コミュニティにアドバイスしてください。私が仮定しているのは、私が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：

Answer 1

最後に、私はそれを考え出しました。

なぜ私は、このようなことがとても素敵な高度なjqueryで簡単に達成できる場合、従来のJavaScriptアプローチに傾いているのだろうと思います。私は​​に関するいくつかのコンセプトを観察し、この小さなものを非常に少数の行で動作させるのに役立ちました。ここに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'; 
     } 
    }