Question

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

＆＃13;

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

＆＃13;

.add {
  color: blue;
}

＆＃13;

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

＆＃13;

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>

Answer 2

您必须将.load()放在click处理程序中：

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

问题是您在点击文档准备好之前调用了.load()。如果会有更多添加的行。然后，您可以使用.last()获取最后一个.loadi div：

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

Answer 3

$(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>');
    // window.open("secondpage.html", '_blank');
     $(".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>

如何在附加的div

3 个答案: