我有一个快速的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元素位于文档的开头,因此可以在其中附加事件而不必等待文档准备就绪。

09-11 19:53
查看更多