添加的列表视图不响应点击

Question

我有一个使用JavaScript / jQuery创建的列表视图。 当我单击列表项时，我必须执行代码。

方案1：我使用以下代码：

$("div#home ul#one li").live('click', function() { console.log('click') });

此代码获得了点击，但获得了两次。 因此，当我单击列表项时，它会输出两个console.logs

方案2：我有此代码用于在常规index.html文件中创建的另一个列表。

$("div#home ul#two li").off('click').on('click', function() { console.log('click') });

此代码不会执行两次代码。

无论如何，我可以让方案2在JavaScript创建的listview上工作吗？ （也欢迎其他任何建议）

Answer 1

如果要动态创建元素，则需要使用委托表单

$("div#home").on('click','li', function() { console.log('click') });

将事件处理程序绑定到绑定时存在的最接近的静态父级

如果您的ul不是动态的-您可以将其绑定到ul

$("div#home ul").on('click','li', function() { console.log('click') });

Answer 2

为了让场景2工作动态附加元素，使用on与委托，就像这样：

$("#two").on('click', 'li', function() { console.log('click') });

我缩短了第一个选择器，因为如果您通过id选择，那么它应该是唯一的。

另外，我会假设第一个方案两次登录到控制台，因为您嵌套了li元素？

Answer 3

问题是您没有在正确的位置绑定on侦听器，而是在ANY页的pageinit处理函数中声明将您的on侦听器添加到li： $("div#home").on('click','li', function() { console.log('click') });

因此，您将在div#login页面上附加一个侦听器，并在第二个div#home页面上附加一个冗余的第二侦听器。 当您单击li一个事件将触发两个侦听器，并且您将获得两次单击。

您应该做的是在$(document).on('pageinit', function()将on监听器声明包装在检查您所在页面的条件中：

if ($(this).attr(id') === 'home'){
     $("div#home").on('click','li', function() { console.log('click') });
}

那是简单的解决方案，您真正应该做的是根据触发了pageinit事件的页面来分支代码，并基于该页面调用正确的代码。 请参阅：有关构建jQM Apps的指南。

其要旨是将一个数据属性附加到描述您的页面的div[data-role=page]等上，然后为每个页面调用单独的代码。 （而不是像本示例中那样使用ID，因为您可以轻松地在多页面jQM应用中拥有一个页面的多个实例）

Answer 4

我无法创建jsFiddle，因为这似乎由于某种原因无法加载我的函数。 我已经将脚本在线发布在自己的网站上。

登录设置正在运行。 只需单击登录，便会出现屏幕（主页）。 如果单击LI标记之一并打开控制台日志，则会看到2次点击，而不是1次。

如果您需要任何代码，请在下面评论。

我使用的当前代码：

$("div#home").on('click','li', function() { console.log('click') });

可以在custom.js文件中找到