jQuery - 选择动态创建的 div 元素

Question

我是一个快速的jQuery问题：

首先，我的HTML代码如下：

<div id="taskinput">
    <form>
         <input id="taskinput-box" type="text"></input>
         <input type="submit"></input>
    </form>
</div><!-- end taskinput -->
<div id="taskoutput"></div><!-- end taskoutput -->

我正在使用 .append 来创建一个名为 .task 的新类，并从用户的 #taskoutput 中创建内容。

$("#taskinput").submit(function() {
    var tasktext = $('#taskinput-box').val()
    $('#taskoutput').append('<div class="task">'+tasktext+'</div>');
    $('#taskinput-box').val("");
    return false;
});

上面的代码运行良好；当我尝试选择创建的div时，问题就出现了。下面的代码无法工作：

$(".task").click(function() {
    $(this).slideUp();
});

我错过了什么？

- steve-er-rino

---

感谢大家的快速回复，每个人都非常有帮助。 - steve-er-rino

Answer 1

您需要像使用 on 一样使用 delegate event：

$('#taskoutput').on('click', '.task', function(){
    $(this).slideUp();    
});

@salek 演示，但使用on

请阅读on文档：

事件处理程序仅绑定到当前选择的元素；它们必须在您的代码调用.on（）时存在于页面上。为确保元素存在并可以被选择，请在文档就绪处理程序内进行事件绑定，适用于HTML标记中的元素。如果将新的HTML注入到页面中，则在放置新的HTML后选择元素并附加事件处理程序。或者，使用委派事件附加事件处理程序，如下所述。

委托事件的优点是它们可以处理稍后添加到文档中的后代元素的事件。通过选择保证在附加委派事件处理程序时存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是Model-View-Controller设计中视图的容器元素，或者是文档，如果事件处理程序希望监视文档中的所有冒泡事件，则可以使用文档元素。在加载任何其他HTML之前，文档元素在文档头中可用，因此可以安全地在那里附加事件，而无需等待文档就绪。

- gdoron

Answer 2

$(".task").click(... 的意思是“查找当前存在的所有 .task 元素，并为它们绑定事件处理程序。如果以后创建了元素，例如你的示例中，在这些元素上将不会绑定事件处理程序。”

您需要将事件处理程序绑定到始终存在的元素上。由于祖先元素会被通知其后代元素的事件，因此单击 .task 元素始终会触发 #taskoutput 上的 click 处理程序。jQuery 的 on 方法可以为您完成这个简单的任务：

$('#taskoutput').on('click', '.task', function(){
    $(this).slideUp();    
});

- lonesomeday

---

我处于类似的情况，并尝试了你的解决方案。但是我遇到了一个未捕获的异常“对象没有'on'方法”。有什么想法吗？ - nom-mon-ir

没关系，我在https://dev59.com/C3I95IYBdhLWcg3w2R3z找到了一个可行的解决方案。也就是说，我必须使用.live('change'，function() - nom-mon-ir

Answer 3

使用jQuery的.on()方法，在运行时绑定HTML事件。像这样：

$("#taskoutput").on({
    click: function() { $(this).slideUp(); }
}, '.task');

- frenchie

Answer 4

你需要使用的是 live('click', function() { ... 我为你创建了一个 jsfiddle，链接为 http://jsfiddle.net/2ZmF4/。

$(".task").die().live('click', function() {
    $(this).slideUp();
    return false;
});​

您需要决定是否需要根据您的情况放弃该调用... 无论如何，我还是把它放进去了...

- salek

---

好的，那就用".on"吧！使用lonesomeday的版本。 - salek