使用 jquery 在动态生成的列表项上单击事件 [英] Click event on dynamically generated list items using jquery

问题描述

我有一个动态生成的列表，然后单击该项目并将 index() 传递给另一个函数.

问题是这个列表是动态填充的，当我执行 click 事件时，我的代码没有响应.但是，如果除了动态填充的那些静态元素之外，我还向列表中添加了几个静态 li 元素.很奇怪.

一些代码:

这会动态创建列表:

function SetOpenRecentURL( openRecentURL ) {$('#recentProjectsId').append('<li>' + openRecentURL + '</li>')}

这是传递Index()的点击事件:

$('#recentProjectsId li').on('click', function () {var projIndex = $(this).index();控制台日志(项目索引)开放项目()})

带有几个Static Li的HTML

<li>测试1</li><li>测试2</li>

当我运行我的程序时，我的列表看起来很完美，包括我的静态 li 和动态的，但我不能点击动态的，只能点击静态的.

解决方案

当我运行我的程序时，我的列表看起来很完美，包括我的静态 li 和动态的，但我不能点击动态的，只能点击静态的.

那是因为，您的代码绑定 click 处理程序的方式仅在绑定侦听器时绑定到页面中的元素.设置点击侦听器稍有不同，它会工作，利用事件委托:

$('#recentProjectsId').on('click', 'li', function () {//剪...});

通过为 .on() 指定额外的 selector 参数:

<块引用>

一个选择器字符串，用于过滤触发事件的选定元素的后代.如果选择器为空或省略，则总是在到达被选元素时触发该事件.

<小时>

请注意，您的 HTML 当前无效.

元素是仅在

s、
s 和 s 内有效.>

I have a list being dynamically generated and then I click on the item and pass the index() to another function.

The problem is that this list is being populated dynamically and my code does not respond when I do click event. BUT, if I add a couple of Static li elements to the list in addition to the dynamically populated ones those Static ones work. Its very odd.

Some code:

This dynamically creates the list:

function SetOpenRecentURL( openRecentURL ) {

 $('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
 }

This is the click event to pass the Index():

$('#recentProjectsId li').on('click', function () {
        var projIndex = $(this).index();
        console.log(projIndex)
        OpenProject()

    })

The HTML with a few Static Li's

<div class="recentProjects" id="recentProjectsId">
<li>Test 1</li>
<li>Test 2</li>
        </div>

When I run my program my list looks perfect and includes my static li plus my dynamic ones, but I cannot click on the dynamic ones, only static.

解决方案

When I run my program my list looks perfect and includes my static li plus my dynamic ones, but I cannot click on the dynamic ones, only static.

That's because, the way your code binds the click handler, it is only bound to elements in the page at the time that the the listener is bound. Set up the click listener just a little differently and it will work, by taking advantage of event delegation:

$('#recentProjectsId').on('click', 'li', function () {
    // snip...
});

By specifying an additional selector argument to .on():

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

---

Note that your HTML is currently invalid. <li> elements are only valid inside of <ul>s, <ol>s, and <menu>s.

这篇关于使用 jquery 在动态生成的列表项上单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！