如果我将某些 HTML 注入 DOM 后将使用的 jQuery 放入 $('document').ready() 中，这会是一个问题吗？

Question

我有一个 jQuery 函数，当单击某个按钮时，它会删除某些 html。在单击另一个按钮之前，该 HTML 并不存在于 DOM 中。单击时删除 HTML 的按钮并不存在，直到单击另一个按钮，并且单击时它会自行删除。 $('document').ready() 函数中存在这个问题吗？如果不是的话应该在哪里。

我为什么问是因为我知道我用这个函数以某种方式造成了错误，但不知道在哪里。如果您有任何其他想法，那将会非常有帮助。

代码如下：

<div id="popups">
    <div id="createform">
        <div id="createformInside">
            <input type="text" id="testTitle" size="20">
            <input type="text" id="testSubj">
            <span id="testOptions">More Options</span>
            <br/>
            <textarea id="testContent" ></textarea>
            <input type="button" value="Save Test" id="saveBttn">
        </div>
     </div>
</div>

$('#saveBttn').click( function() {//if the save button on the create test form is clicked...
    $('#createform').remove();//gets rid of the create test form
})

如果有帮助的话，完整的代码在这里： http://jsfiddle.net/chromedude/ggJ4d/

Answer 1

您的问题来自这样一个事实：当文档准备好时，您绑定点击处理程序的 html input 元素不存在。这意味着当您的 .click() 处理程序实例化时它不存在。要将处理程序绑定到现在和将来存在的元素，您可以使用 .live() 或 .delegate()。我更喜欢后者，因为它不会绑定到 document 并等待事件冒泡，而是绑定到您传递给它的选择器，并且只监视在该特定范围内触发的冒泡事件元素。

因此，考虑到这一点，您可以像这样修改代码：

$('#popups').delegate("#saveBttn", "click", function() {//if the save button on the create test form is clicked...
    $('#createform').remove();//gets rid of the create test form
});

Answer 2

使用 live 而不是 click，因为在运行时

Live 将用于将来的参考 dom 元素。

$('#saveBttn').live('click', function() {

});

Answer 3

您可能应该将代码放在生成 HTML 的按钮的 .click() 中。

顺便说一句，您需要关闭 input 标记，例如：

<input type="text" id="testSubj"/>

而不是：

<input type="text" id="testSubj">

基于您的 jsfiddle (http://jsfiddle.net/chromedude/ggJ4d/)，类似这样的内容应该有效：

$('#new').click( function() {//if a new test is wanted to be created...
    $('#popups').append($formHtml);

    $('#saveBttn').click( function() {//if the save button on the create test form is clicked...
        $('#createform').empty();//gets rid of the create test form
    })
})