javascript - 如何加载另一个页面onclick of appended div

Question

我有一个包含一些行的表格。在此表中，我有添加按钮以在单击时追加行。我的问题是单击“添加”时如何在行中加载 class = loadi 中的 ajax seconpage？ 我写了一些代码，但这些代码无法使用 loadi 类在 div 中加载第二页。这是我的片段:

$(document).ready(function() {
  $(".add").click(function() {
    $('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
  });
  $(".loadi").load("secondpage.html");
})

.add {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
  <tr>
    <td>1</td>
    <td>Title</td>
    <td>price</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Title</td>
    <td>price</td>
  </tr>
</table>
<span class="add">Add +</span>

Answer 1

您需要在点击处理程序中对刚刚附加的内容调用 load()。当您在元素存在之前调用 load() 时，您当前的逻辑不起作用，因此什么也没有发生。试试这个:

$(".add").click(function() {
    var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
    $tr.find(".loadi").load("secondpage.html");
});

$(".add").click(function() {
  var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
  //$tr.find(".loadi").load("secondpage.html"); // AJAX...
  $tr.find(".loadi").text("load AJAX content here...");
});

.add {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
  <tr>
    <td>1</td>
    <td>Title</td>
    <td>price</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Title</td>
    <td>price</td>
  </tr>
</table>
<span class="add">Add +</span>