中的 元素。
加载页面时,事件添加正常,但是当我动态添加它时(按下按钮)它不起作用。
我读到问题是因为事件被处理而不是委托。
我必须在函数中更改哪些内容才能委派事件?
此外,我需要添加的具有"删除附件"类。
这是片段:
我正在尝试将单击事件添加到
加载页面时,事件添加正常,但是当我动态添加它时(按下按钮)它不起作用。
我读到问题是因为事件被处理而不是委托。
我必须在函数中更改哪些内容才能委派事件?
此外,我需要添加的具有"删除附件"类。
这是片段:
$(document).ready(function(){
var a = 0;
$('button[data-button="attachment"]').on("click",function () {
var ul = $(this).next("ul");
var li = ul.find("li:last-child");
var element ="<li name='li3'>";
element += '<a class="deleteAttachment">' + a + '</a></li>';
li.before(element);
a++;
});
$('li').on("click", 'a.deleteAttachment', function () {
alert("click");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<button name="Button1" data-button="attachment">
button1
</button>
<ul name="ulbuton1">
<li name="li3">
<a class="deleteAttachment">a</a>
</li>
</ul>
<button name="Button2" data-button="attachment">
button2
</button>
<ul name="ulbuton2">
<li name="li3">
<a class="deleteAttachment">b</a>
</li>
</ul>
<button name="Button3" data-button="attachment">
button3
</button>
<ul name="ulbuton3">
<li name="li3">
<a class="deleteAttachment">c</a>
</li>
</ul>
</div>
</body>
</html>
您也添加了 LI,因此委派给该 LI 是行不通的,您必须委托给实际存在的东西,例如 UL
$('ul').on("click", 'li a.deleteAttachment', function () {
alert("click");
});
事件委托意味着将事件处理程序添加到父级而不是其子级,这样,无论需要处理某种类型的事件的子级数量如何,该事件都只有一个处理程序(在父级)。
实际上,该事件会不断冒泡,直到找到最终捕获它的处理程序。因此,您可以将其放置在元素"上方"的任何位置(原则上)。
在您的情况下,您将事件附加到 li
,在这种情况下应该是子项。
您需要将事件附加到其父级,该父级应该已经存在,以便当事件在li
上触发时,它会被冒泡到父级,捕获并执行。
将其连接到ul
、div
或body
。
我认为这是解决您问题的好方法:
$( "body" ).delegate( "a.deleteAttachment", "click", function() {
//do your stuff here
});