Question

我有一个动态添加<tr>的脚本，看起来jQuery无法识别其中包含的元素，因为它尚未加载到DOM中。

我尝试使用.on函数，但它无效。

有你的想法吗？

$(document).ready(function(){
  $("#add_item").click(function(e){
    e.preventDefault();
    var nbeTr = $(".tablerow").length;
    if (nbeTr < 10){
      $(".tablerow:last").after("<tr class='filleul'><td></td><td></td><td></td><td><button class='newtr'>X</button></td></tr>");
    }
  });
  $(document).on("click", ".newtr", function(event) {
    event.preventDefault();
    alert("Yo");
  });
});

Answer 1

创建按钮元素时，您需要注册事件侦听器。现在你正在尝试将点击事件注册到未定义的元素。

// create button
$ele = $("<button class='newtr'>X</button>");
// bind event listener to button
$ele.on("click", function() { alert("hello"); });
// insert $ele into DOM
$target.append($ele);

Answer 2

嗨巴克你的代码正在运行，我认为问题还有其他的地方。

请参阅此工作示例：

＆＃13;

$(document).ready(function() {
  $("#add_item").click(function(e) {
    e.preventDefault();
    var nbeTr = $(".tablerow").length;
    if (nbeTr < 10) {
      $(".tablerow:last").after("<tr class='tablerow filleul'><td>1</td><td>2</td><td>3</td><td><button class='newtr'>X</button></td></tr>");
    }
  });
  $(document).on("click", ".newtr", function(event) {
    event.preventDefault();
    alert("Yo");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='add_item'>Add item</button>
<table>
  <tr class='tablerow'>
    <td>c1</td>
    <td>c2</td>
    <td>c3</td>
    <td>
      <button class='newtr'>X</button>
    </td>
  </tr>
  <table>

＆＃13;

Answer 3

好的，问题是jQuery使用的版本很糟糕。

我只使用最后一个jQuery版本的CDN并刷新缓存并且它正在工作。

在不在dom中的元素上绑定事件

3 个答案: