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

它无效，因为您正在检查.inputdata3。 JS代码将获得第一个.inputdata3，并且仅适用于第一个。

您需要更改此行：

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

为：

$('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 3

因为您要将事件侦听器附加到最初呈现的第一个tr，并且事件侦听器附加到此tr。新添加的行没有附加此偶数侦听器。你需要利用事件冒泡。因此，请将您的事件列表器附加到tbody，如下所示：

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

这是一个工作片段。您可以点击Run Code Snippet按钮

按原样运行此代码段

＆＃13;

$(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");
});
});

＆＃13;

<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>

＆＃13;

Answer 4

不要选择$('.inputdata3')，而是选择 .input_fields_wrap_addRow ，例如$('.input_fields_wrap_addRow')。

Answer 5

由于它是一个动态加载的元素，所以不会被拾取，而是使用：

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

希望这有帮助！

之后。为什么.on不工作？

5 个答案: