jquery - 需要帮助使用 load() 将灯箱表单数据加载到 html 页面

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>

文件.html

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

我希望能够单击上表中第三个 td 中的“查看”按钮并检索 td.data 中的文本，以便我可以在另一个灯箱中显示它。似乎文本对我来说不可用，因为它最初没有文本。我可以毫无问题地检索 Cell 1。我需要在这里使用ajax(成功处理程序)吗？如果是这样，我将如何同时附加和加载到页面中？谢谢!

最好的， 德里克

Answer 1

加载 File.html 后，您可以绑定(bind)一个 onclick 事件处理程序。

$('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 时都绑定(bind)处理程序。
您甚至不需要在 onready 处理程序中定义它。