Question

我有一个带有表单的灯箱。在表单中输入的信息用于填充正在加载的html文件，并使用load（）函数将其附加到我的主html页面。我能够毫无问题地加载文件，数据显示。但是，我希望能够通过使用按钮上的单击事件在另一个灯箱中显示该数据，然后使用prev（）查找数据并显示它。这是行不通的。我怀疑我可能需要为$ .ajax使用成功事件监听器。但是，我不确定。

代码就是这样的。

灯箱：

<div id="lightbox">
  <form>
    <input type="text" id="textbox1">
    <input type="submit" id="submit1" value="submit">
  </form>
</div>

加载功能：

$('#submit1').click(function(e) {
   e.preventDefault();

   $('div#result').append($('<div').load('file.html', function() {
      var input = $('#textbox1').val();
      $(this).find('td.data').text(input);
   });
});

将数据加载到的html： <div id="result"></div>

File.html

   <table>
 <tr>
   <td>Cell 1</td><td class="data"></td><td><button value="View"></button>
 </tr></table>

我希望能够点击上面第三个td中的View按钮并检索td.data中的文本，以便我可以在另一个灯箱中显示它。似乎我没有这样做的文本，因为它最初没有文本。我可以毫无问题地检索Cell 1。我需要在这里使用ajax（成功处理程序）吗？如果是这样，我将如何追加并同时加载到页面中？谢谢！

最佳，德里克

Answer 1

您可以在加载onclick后绑定File.html事件处理程序。

$('div#result').append($('<div').load('file.html', function() {
    var input = $('#textbox1').val();
    $(this).find('td.data').text(input);
    $(this).find('button').click(function(e) {
        e.preventDefault();
        var data = $(this).closest('tr').find('td.data').text();
        // do something with data
    });
});

如果您使用delegated events，

或更好的解决方案。

$(document).on('click', '#result button', function(e) {
    e.preventDefault();
    var data = $(this).closest('tr').find('td.data').text();
    // do something with data
});

这样，每次加载File.html时都不需要绑定处理程序您甚至不需要在onready处理程序中定义它。

需要帮助使用load（）

1 个答案: