jQuery移动弹出点击一个li元素

jQuery mobile popup on clicking an li element

本文关键字：一个 li 元素 移动 出点 jQuery      更新时间：2023-09-26

我正在尝试在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中的元素时什么也没发生:(

我怎么能解决这个问题?

谢谢,Ram

你没有展示你如何处理点击LI(在你的js中)，但动态生成内容的事情是，如果你想添加事件监听器，你需要使用委托一。所以:

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

你需要使用:

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

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

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

或

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

谢谢大家!

"委派"帮了我。

$(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();
        });
    });
相关文章：