なぜJavascriptが追加の下で動作していないのですか？

Question

私は自分のhtmlにテーブルを持っていて、jqueryを使ってテーブル内のすべての行を追加するために追加を使用しました。追加セクションの一部を以下に示します。私は数字を変更するための入力セクションを持っていますが、この入力クリックはもう働きません。

なぜですか？コードを自分のhtmlテーブルに戻すと、それは動作します。 また、削除ボタンも機能しません。私はこれが追加機能と関係していると思う？

$('.bundle-main').append('<li class="td td-amount">\ 
     <div class="amount-wrapper ">\ 
      <div class="item-amount ">\ 
      <div class="sl">\ 
       <input class="min am-btn" name="" type="button" value="-" />\ 
       <input class="text_box" name="" type="text" value="3" style="width:30px;" />\ 
       <input class="add am-btn" name="" type="button" value="+" />\ 
       </div>\ 
       </div>\ 
       </div>\ 
       </li>'); 

PS：私がコンテンツを動的に制御したいと思って、私のCSSが正常に動作しているためです。

あなたはその理由を知っていますか？

Answer 1

入力を動的に追加するので、の後にクリックリスナーがに追加されていることを確認する必要があります。それ以外の場合は、DOMには存在せず、クリックリスナーはアタッチされません。

追加呼び出しの後にリスナーをアタッチするだけです。

Answer 2

イベントハンドラは入力が追加される前に定義されているためです。 あなたは2つの選択肢があります：

No1。追加入力後、イベントハンドラを定義しました。

No2。はただ、次のようなラッパーに（「クリック」）.onを使用します。

$('.bundle-main').on('click', '.add.am-btn', function(){ 
    // To Do 
});