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