委托不处理动态添加的元素
委托不处理动态添加的元素
提问于 2015-01-20 11:44:46
我对代表有意见。主要问题是，该委托没有处理动态创建的元素。
$('.menu').delegate('> li', 'click', function() {
var thisId = this.id;
alert(thisId);
});
$('#but').click(function() {
$('#2').append('<ul><li id="new">yyy</li></ul>');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li id="1"><a>xxx</a>
</li>
<li id="2"><a>xxx</a>
</li>
<li id="3"><a>xxx</a>
</li>
<li id="4"><a>xxx</a>
<ul class="menu">
<li id='old'>old</li>
</ul>
</li>
</ul>
<button id="but">add</button>
在这里，您可以看到垂直菜单的例子，默认情况下只有一个子菜单。接下来是这里按钮，即添加子菜单。接下来，我有一个简单的委托函数，用于单击并返回单击元素的id。当我按#但按钮添加新的子菜单并尝试单击它时，会出现问题，因为我将只获得父元素的Id，而不是元素和父元素的id，因为它使用的是非动态添加的ul (正如您在html源代码的末尾所看到的)。那么，如何编辑我的脚本以‘只返回一个id(只返回单击元素的id，而不是单击和父元素的id)，并使其在动态添加的元素上工作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-20 11:50:50
除非纯粹是为了附加样式，否则您的示例不需要子菜单上的.menu。
您只需要针对顶级.menu中的所有LIs (使用li)，而不仅仅是子LIs (您有> li)。您还需要停止向父节点传播的单击(否则它将触发两次--单击LI &然后再次触发祖父母LI)。
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xnzs71d2/1/
$('.menu').delegate('li', 'click', function (e) {
e.stopPropagation();
var thisId = this.id;
alert(thisId);
});在更高版本的jQuery中，使用委托的on代替
$('.menu').on('click', 'li', function (e) {
e.stopPropagation();
var thisId = this.id;
alert(thisId);
});JSFiddle: http://jsfiddle.net/TrueBlueAussie/xnzs71d2/3/
Stack Overflow用户
发布于 2015-01-20 11:53:00
// jQuery 1.7+
$('.menu').on('click', 'li', function() {
var thisId = this.id;
alert(thisId);
});
// jQuery 1.4.3+
$('.menu').delegate('li', 'click', function() {
var thisId = this.id;
alert(thisId);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28044528
复制相关文章
相似问题
腾讯云开发者
