Question

我想知道如何使用jQuery中的prepend（）方法将html li元素的id值添加到html ul中。这是我的代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{asset('bundles/moslemtest/phptest/bootstrap.min.css')}}"/>
    <script src="{{asset('bundles/moslemtest/phptest/jquery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('bundles/moslemtest/phptest/bootstrap.min.js')}}" type="text/javascript"></script>
</head>
<body>
    <script src="{{asset('bundles/moslemtest/src/jquery.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            setTimeout( test2, 500);
            $(".dropdown-menu > li").click(function(){
                alert($(this).attr('id'));
            });
        });
        function test2(){
            var subject = 1;
    $.ajax({
    url: '{{asset('bundles/moslemtest/phptest/moslem3.php')}}',
        type: 'POST',
        data: {subject:subject},
        dataType: 'JSON',
        success: function(data1) {
                        var obj = JSON.parse(data1);
                        for (var i = 0; i < obj.length; i++) {
                            $(".dropdown-menu").prepend('<li id="'+obj[i].id+'">l\'utilisateur ayant l\'id: '+obj[i].actor+' '+obj[i].message+' l\'événement ayant l\'id: '+obj[i].object+'</li><hr>');
                        }
        }
    });
        }
    </script>
<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <input type="image"  id="notifications" alt="notifications" src="{{asset('bundles/moslemtest/phptest/notifications.jpg')}}"/>
        </button>
        <ul class="dropdown-menu" role="menu">
        </ul>
    </div>
</body>

当我点击下面屏幕截图中的菜单的任何项目（这是一个Bootstrap菜单）时，没有任何反应，尽管预计当我点击任何项目时，会出现一个警告窗口，其中包含该项目的id属性值：

enter image description here

虽然我把代码放在下面：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{asset('bundles/moslemtest/phptest/bootstrap.min.css')}}"/>
    <script src="{{asset('bundles/moslemtest/phptest/jquery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('bundles/moslemtest/phptest/bootstrap.min.js')}}" type="text/javascript"></script>
</head>
<body>
    <script src="{{asset('bundles/moslemtest/src/jquery.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".dropdown-menu > li").click(function(){
                alert($(this).attr('id'));
            });
        });
    </script>
<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <input type="image"  id="notifications" alt="notifications" src="{{asset('bundles/moslemtest/phptest/notifications.jpg')}}"/>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li id="1">good morning</li><hr>
            <li id="2">hello</li><hr>
            <li id="3">hi</li><hr>
            <li id="4">welcome</li><hr>
        </ul>
    </div>
</body>

然后我点击菜单中的任何项目，会出现一个包含其id属性值的警告窗口，如下面的屏幕截图所示：

enter image description here

很明显，使用prepend（）方法添加到HTML ul元素的HTML li元素存在问题。所以，我的问题是如何解决这个问题？我真的需要使用prepend（）方法。

提前致谢

Answer 1

您需要使用事件委派来获取信息。因为第一次运行jQuery时这些元素不存在，所以它们对jQuery不是“可见的”。

$('body').on('click', ".dropdown-menu > li", function(){
    alert($(this).attr('id'));
});

将代码更改为此调用会调用事件委派并捕获单击evet，因为它会冒泡到正文，然后可以正确处理。

Answer 2

使用附加到元素的最近的不变祖先的委托on：

e.g。

$('.dropdown-menu').on('click', 'li', function(){
    alert($(this).attr('id'));
});

这会聆听“点击”。从任何.dropdown-menu，然后的子项中冒泡它会应用li选择器，然后它会调用所提供的函数来导致导致事件

一般情况下，如果您没有特定的祖先，就是使用document作为听取的地方：

$(document).on('click', '.dropdown-menu li', function(){
    alert($(this).attr('id'));
});

不要使用body，因为它有一些奇怪的行为。

如何使用jQuery中的prepend（）方法将html <li>元素的id值添加到html <ul>元素中？</ul> </li>

2 个答案:

e.g。