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 -->

我在创建新类.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();
});

我错过了什么？

Answer 1

您必须使用与delegate event匹配的on：

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

@salek DEMO，但on

阅读on docs：

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

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

Answer 2

$(".task").click(...说＆＃34;找到当前存在的所有.task元素，并将事件处理程序绑定到它们。如果稍后创建元素（如示例中所示），则它们将不会绑定事件处理程序。

您需要将事件处理程序绑定到始终存在的元素。由于祖先元素会通知其后代的事件，因此点击.task元素将始终触发click上的#taskoutput处理程序。 jQuery的on方法让你很简单：

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

Answer 3

使用jquery .on()绑定在运行时生成的HTML上的事件。像这样：

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

Answer 4

你需要使用的是实时（'click'，function（）{...

我为你创造了一个jsfiddle http://jsfiddle.net/2ZmF4/

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

根据你的情况，你需要决定是否需要根据你的情况来决定死...我总是把它甩在那里......

jQuery - 选择动态创建的div

4 个答案: