Question

我试图在点击UL列表中的LI元素时显示弹出窗口。

这是html部分

<ul id="list" data-role="listview" data-filter="true" data-inset="true">
</ul>

<div id="popups">
</div>

#list中的元素将动态生成并填写。

由于我想要点击列表中的元素弹出窗口，当我在UL中插入元素时，我正在这样做

 $("#popups").append('<div data-role="popup" id="' + event.data.key + '">' + '<p>' + event.data.text + '</p>' + '</div>');
 $("#list").append('<li><a href="#' + event.data.key + '" data-rel="popup" class="ui-btn ui-corner-all ui-btn-right" >' + event.data.text + '</a></li>');

但我得到的是https://dl.dropboxusercontent.com/u/2736804/others/2014_07_28_jQuery.PNG，当我点击UL中的元素时没有任何反应：（

我怎么能解决这个问题？

谢谢，拉姆

Answer 1

你没有显示你如何处理点击LI（在你的js中）但是动态生成内容的东西是你想要添加事件监听器你需要使用委托一个。所以相反：

$('#list li').click(function() { /* your code here */ });

您需要使用：

$('#list').on('click', 'li', function() { /* your code here */ });

Answer 2

要么必须使用以下任何一种方法，因为li是动态创建的

$('#list').on('click', 'li', function() { });

OR

$('#list').delegate('li', 'click', function() { });

Answer 3

谢谢你们！

＆＃34;代表＆＃34;帮助了我。

这是修复...

$(document).ready(
    function() {

        $('#list').delegate('li', 'click', function() { 
        var listId = this.id;
        console.log("element id: " + listId);
        popupElement = '#'+listId+'L';
        console.log("popupElement id: " + popupElement);
        $( popupElement ).popup();
        });

    });

单击li元素时的jQuery移动弹出窗口

3 个答案: