4

我有一个快速的 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();
});

我错过了什么？

4

4 回答 4

2

您必须使用delegate eventlike on：

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

@salek DEMO但有on

阅读on文档：

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

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

于 2012-05-23T00:48:08.290 回答
2

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

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

$('#taskoutput').on('click', '.task', function(){
    $(this).slideUp();    
});
于 2012-05-23T00:50:23.970 回答
0

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

$("#taskoutput").on({
    click: function() { $(this).slideUp(); }
}, '.task');
于 2012-05-23T00:47:47.213 回答
0

你需要使用的是 live('click', function() { ...

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

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

您将需要根据您的情况决定是否需要呼叫死亡...无论如何我都把它扔在那里...

于 2012-05-23T00:55:48.750 回答