jquery - jQuery-选择动态创建的div

我有一个快速的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 -->

我在创建新类.task时使用.append从用户的#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();
});

我想念什么？

最佳答案

您必须像delegate event一样使用on：

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

@salek DEMO但带有on

阅读on docs：

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

  委派事件的优势在于，它们可以处理来自后代元素的事件，这些事件在以后的时间添加到文档中。通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是Model-View-Controller设计中视图的容器元素，也可以是文档。在加载任何其他HTML之前，document元素位于文档的开头，因此可以在其中附加事件而不必等待文档准备就绪。

html

jquery - jQuery-选择动态创建的div