.append a rowなぜ.onが動作しないのか？

Question

以下のコードのように最初の行で動作しますが、行を追加した後には動作しません。私は、新しい行が作成されたことを認識していないと思います。私はここに、ここで を立ち往生コード

<table id="Allitems" class="table table-bordered table-hover Ptable"> 
      <tbody class = "input_fields_wrap_addRow"> 
       <tr class ="inputdata3"> 
        <td class ="inputdata"> 
        </td> 
        <td class ="inputdata"> 
         <input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div id="inv_" class="inv_spacer" > 
      <button class="add_field_button">Add More Fields</button> 
     </div> 

そして

$(document).ready(function() { 
       var wrapper   = $(".input_fields_wrap_addRow"); //Fields wrapper 
       var add_button  = $(".add_field_button"); //Add button ID 
       $(add_button).click(function(e){ //on add input button click 
        e.preventDefault(); 
         $(wrapper).append('<tr class ="inputdata3"><td class ="inputdata"></td><td class ="inputdata"><input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"></td></tr>'); //add input box 

       }); 
      }); 


      $(function(){ 
       $('.inputdata3').on('keyup','.Invquantity',function(){ 
        var tr = $(this).parent().parent(); 
        alert("eded"); 
       }); 
      }); 

Answer 1

イベントが委任イベントハンドラが装着された時点で存在することがある静的な要素に委任する必要があります。 inputdata3が動的に生成するので、イベントハンドラは機能しませんでした。

代わりの$('.inputdata3')使用wrapperキャッシュされた変数またはinput_fields_wrap_addRowセレクタ

$(".input_fields_wrap_addRow").on('keyup','.Invquantity',function(){}) 

Answer 2

それは文句を言わない拾っ取得動的にロードされた要素であるためには、代わりに使用します。

$("body").on("keyup", ".Invquantity", function(){ 
    //code here 
}); 

ホープ、このことができます！

Answer 3

.inputdata3をチェックしているため動作しません。 JSコードは最初に.inputdata3になり、最初に動作します。あなたがEVを装着しているので

$('table#Allitems').on('keyup', '.Invquantity', function() {

$(document).ready(function() { 
 
    var wrapper = $(".input_fields_wrap_addRow"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    $(wrapper).append('<tr class ="inputdata3"><td class ="inputdata"></td><td class ="inputdata"><input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"></td></tr>'); //add input box 
 

 
    }); 
 
}); 
 

 

 
$('table#Allitems').on('keyup', '.Invquantity', function() { 
 
    var tr = $(this).parent().parent(); 
 
    alert("eded"); 
 
}); 
 

 
$(function() { 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Allitems" class="table table-bordered table-hover Ptable"> 
 
    <tbody class="input_fields_wrap_addRow"> 
 
    <tr class="inputdata3"> 
 
     <td class="inputdata"> 
 
     </td> 
 
     <td class="inputdata"> 
 
     <input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div id="inv_" class="inv_spacer"> 
 
    <button class="add_field_button">Add More Fields</button> 
 
</div>

Answer 4

：に

$('.inputdata3').on('keyup','.Invquantity',function(){

：あなたはこの行を変更する必要が

最初にレンダリングされた最初のtrのリスナーがこのtrに接続されています。新しく追加された行には、このリスナーが接続されていません。イベントのバブリングを利用する必要があります。だからではなく、次のようにあなたのtbodyにあなたのイベントのリスナーを添付：ここ

$('.input_fields_wrap_addRow').on('keyup','.Invquantity',function(){ 
    var tr = $(this).parent().parent(); 
    alert("eded"); 
}); 

は、作業スニペットです。 Run Code Snippetボタン

$(document).ready(function() { 
 
    var wrapper = $(".input_fields_wrap_addRow"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    $(wrapper).append('<tr class ="inputdata3"><td class ="inputdata"></td><td class ="inputdata"><input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"></td></tr>'); //add input box 
 

 
    }); 
 
    
 
    $('.input_fields_wrap_addRow').on('keyup', '.Invquantity', function() { 
 
    var tr = $(this).parent().parent(); 
 
    alert("eded"); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Allitems" class="table table-bordered table-hover Ptable"> 
 
      <tbody class = "input_fields_wrap_addRow"> 
 
       <tr class ="inputdata3"> 
 
        <td class ="inputdata"> 
 
        </td> 
 
        <td class ="inputdata"> 
 
         <input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     <div id="inv_" class="inv_spacer" > 
 
      <button class="add_field_button">Add More Fields</button> 
 
     </div>

Answer 5

代わりの$('.inputdata3')を選択する上でクリックすることであるように、この$('.input_fields_wrap_addRow')よう.input_fields_wrap_addRowを選択し、このスニペットを実行することができます。