Question

我有一个用JavaScript / jQuery创建的listview。当我点击一个listitem时，我必须执行代码。

场景1： 我使用这段代码：

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

此代码选择了点击，但它会选择两次。因此，当我点击一个listitem时，它会输出两个console.logs

场景2： 我有这个代码用于在普通index.html文件中创建的另一个列表。

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

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

无论如何，我可以让Scenario 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听众，而是在pageinit处理程序中声明 ANY 页面添加您的{{ 1}}听取li：on

因此，您将在$("div#home").on('click','li', function() { console.log('click') });页面上附加一个侦听器，并在第二个div#login页面上附加冗余的第二个侦听器。当您单击div#home时，会向两个侦听器触发一个事件，您将获得两次单击。

你应该做的是在你的li包装你的听众声明中，条件是检查你所在的页面：

$(document).on('pageinit', function()

这是一个简单的解决方案，您真正应该做的是根据哪个页面触发if ($(this).attr(id') === 'home'){ $("div#home").on('click','li', function() { console.log('click') }); }事件并根据它调用正确的代码来分支您的代码。请参阅：my guide on structuring jQM Apps。

它的要点是将数据attr附加到描述您页面的pageinit等，然后为每个页面调用单独的代码。 （而不是使用此示例中的ID，因为您可以在多页jQM应用中轻松拥有多个页面实例）

Answer 4

我无法创建一个jsFiddle，因为这似乎无法加载我的函数。我把脚本放在我自己的网站上。

http://anjirorijo.com/webapp/

登录设置正常。只需单击登录，就会出现屏幕（主页）。如果您单击其中一个LI标记并打开控制台日志，您将看到2次点击而不是1.

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

我使用的当前代码：

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

可以在custom.js文件中找到

旁注：当你在#home页面上时不要刷新页面。这将导致jQuery无法加载动态创建列表的函数。使用注销并重新登录。

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

4 个答案: