Question

在下面的代码中，我将呈现一个项目列表，其中每个项目在单击时将执行与其关联项目对象相关的操作。但是，当我运行代码时，警报会在页面加载时立即显示，然后在单击列表项时不显示。我做错了什么？

var projects = (an array of project objects)

jQuery.each(projects, function(index, project) {
    jQuery("#project-list").append("<li "+classString+"><a>"+project.title+"</a></li>");
    jQuery("#project-list").find("li:last").click( function() {
                        alert(project.title);
                    });
    });

Answer 1

根据我的知识，我能够掀起以下内容：

var projects = [{title:'Project 1'},{title:'Project 2'}];

$.each(projects, function(i){
  $("<a/>", { href:'#', text:projects[i].title })
    .click(function(e){alert( projects[i].title );})
    .wrap("<li></li>")
    .parent()
    .appendTo("#project-list");
});

我只是猜测你的项目的对象结构，但你可以修改它。我不确定为什么你的点击会自动发生;我在上面的代码示例中工作正常。也许在你发布的代码中没有其他调用它们的东西。

在线演示：http://jsbin.com/uhixac/edit

Answer 2

我怀疑还有一对括号：

(...).click(function() {
    //...
}()); // note the extra braces here

这会立即执行您的点击处理程序，并将返回值（undefined）传递给jQuery.click（触发模拟点击事件，不执行任何操作），而不是将点击处理程序绑定到点击事件。 / p>

添加点击处理程序以列出jQuery中的项目时，它们都会立即触发

2 个答案: