Question

click函数适用于作为HTML一部分的<li>元素，但不适用于pageinit上以编程方式加载的<li>元素。我不明白为什么不。（此代码具有运行所需的全部内容）

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>   
</head>
<body>
    <div id="thelists" data-role="page">

        <div data-role="header">
            <h1>My Title</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>Hello world</p>
            <ul id="allyourlists" class="current" data-role="listview" data-filter="false">
                <li><a href="index.html" data-role="button" id="delalist">List0:</a></li>
            </ul>       
        </div><!-- /content -->

    </div><!-- /page -->
    <script>
    //Why is delete button not firing? 
    $('#thelists').bind('pageinit', function(event) {
        console.log('in bind pageinit for yourlists');
        var thelists = ["list1", "list2"];
        console.log(thelists);
        $.each(thelists, function(index, alist) {
            $('#allyourlists').append('<li><a href="index.html" data-role="button" id="delalist">List: ' + alist + '</a></li>');
        });
        $('#allyourlists').listview('refresh');
    });

    //gets the val of val1 from the previois call
    $("#delalist").click(function (e) { 
        e.stopImmediatePropagation();
        e.preventDefault();
        alert ('in delalist') ;
    });   

    </script>

</body>
</html>

Answer 1

使用已弃用的live函数：

$("#delalist").live('click',function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

或使用on（jQuery＆gt; 1.7）：

$('body').on('click', "#delalist", function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

另外，我建议您使用class而不是id，因为id应唯一

Answer 2

使用on或delegate来处理动态创建的元素。

使用on（jQuery ver 1.7 +）

$('body').on('click', "#delalist", function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

使用delegate

$('body').delegate("#delalist", 'click', function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

on()参考：http://api.jquery.com/on/ jQuery ver 1.7 +

delegate()参考：http://api.jquery.com/delegate/

Answer 3

ID是唯一的，您正在重复使用“delalist”。

Answer 4

对于将动态插入dom的所有元素，您应该使用.live或.delegate而不是.bind。

使用.delegate比.live更受欢迎，因为.live扫描任何dom更改以绑定事件。阅读.live vs .delegate。

使用.delegate -

$(document).delegate('#thelists', 'pageinit', function () {

使用.live -

$('#thelists').live('pageinit', function(event) {

并且

使用.delegate -

$("#thelists").delegate('#delalist', 'click', function (e) {

使用.live -

$("#delalist").live('click', function (e) {

Answer 5

我不确定你在这里要做什么，但我想我发现了一些可能有用的东西。当我加载你的代码并按照它列出的方式运行时，我找到了第一个按钮，当我点击它时提示回用户。所以我改变了：

            data-role="button" id="delalist">List0:</a></li>

读作：

            data-role="button" id="deallist">List0:

这有帮助吗？

为什么$（）。click（）不能在pageinit生成的<li>上工作？</li>

5 个答案: