如何获取HTML的ID值 <li> 元素添加到html <ul> 元素在jQuery中使用prepend（）方法？
[英]How to get the id value of an html <li> element added to an html <ul> element using prepend() method in jQuery ?
问题描述
I would like to know How to get the id value of an html li element added to an html ul using prepend() method in jQuery. 
我想知道如何使用jQuery中的prepend（）方法获取添加到html ul的html li元素的id值。 This is my code: 这是我的代码：
<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>
When I click on any item of the menu (which is a Bootstrap menu) at the screenshot below nothing happens, despite It is expected that when I click on any item an alert windows appears containing the id attribute value of that item: 当我单击下面屏幕截图中的菜单项（即Bootstrap菜单）中的任何一项时，尽管希望在单击任何项时都会出现一个包含该项的id属性值的警报窗口，但没有任何反应：
Although when I put the code below: 虽然当我将代码放在下面时：
<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>
Then I click on any item of the menu, an alert windows appears containing its id attribute value as you can see at the screenshot below: 然后，我单击菜单的任何一项，将出现一个警报窗口，其中包含其id属性值，如下面的屏幕快照所示：
It is obvious that there is a problem with the HTML li elements which are added to the HTML ul element using the prepend() method. 很明显，使用prepend（）方法添加到HTML ul元素的HTML li元素存在问题。 So, my question is how can I resolve that?? 所以，我的问题是我该如何解决？ I really need to use the prepend() method. 我真的需要使用prepend（）方法。
Thanks in advance 提前致谢
2 个解决方案
解决方案1
2 2014-05-30 16:34:39
You need to use event delegation to get the info. 您需要使用事件委托来获取信息。 Because those elements are not there when jQuery runs the first time, they aren't 'visible' to jQuery. 由于这些元素在jQuery首次运行时不存在，因此它们对jQuery并不“可见”。
$('body').on('click', ".dropdown-menu > li", function(){
alert($(this).attr('id'));
});
Changing your code to this invokes event delegation and captures the click evet as it bubbles up to the body, where it can then be handled properly. 将您的代码更改为此将调用事件委托，并在单击evet冒泡到正文时捕获它，然后可以在其中正确处理。
解决方案2
1 已采纳 2014-05-30 17:45:22
Use delegated on attached to the nearest non-changing ancestor of the elements: 使用委派on连接的元素的最近不改变祖先：
eg 例如
$('.dropdown-menu').on('click', 'li', function(){
alert($(this).attr('id'));
});
This listens for 'click' bubbling up from any children of .dropdown-menu , then it applies the li selector, then it calls the supplied function for any matching element that caused the event. 它侦听.dropdown-menu所有子级中.dropdown-menu “单击”， 然后应用li选择器， 然后为导致事件的任何匹配元素调用提供的函数。
The general case, if you don't have a specific ancestor, is to use document as the place to listen: 如果您没有特定的祖先，通常的情况是使用document作为聆听的地方：
$(document).on('click', '.dropdown-menu li', function(){
alert($(this).attr('id'));
});
Do not use body as it has some weird behavior. 不要使用body因为它有一些怪异的行为。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.