0

我希望几个元素使用相同的 onclick 处理程序，所以我有：

function close_div() {
    $(this).remove();
}

<div class="closeX" onclick="close_div()">The first div</div>
<div class="closeX" onclick="close_div()"The second div</div>
<div class="closeX" onclick="close_div()"The third div</div>

因此，当您单击任何 div 时，它都会从 DOM 中删除。

上面代码的问题是 onclick 没有传递有用的 this 关键字，所以 close_div() 不能使用它。如果我给每个人div.closeX一个不同的id，我可以通过它close_div(id)并做类似 $("#"+id).remove(). 但似乎应该有一种方法可以自动传递对被单击元素的引用，而无需为元素分配 id 并传递它。我错过了什么吗？

谢谢

4

3 回答 3

4

更好——不要使用内联处理程序。

$('.closeX').on('click', function(e){
  $(this).remove();
});

我可能猜测您正在动态创建这些元素，这就是您想要使用内联处理程序的原因 - 但我们仍然有更好的解决方案来分离行为和内容。
这叫委托。

基本上，如果您要动态添加这些元素，那么您在 DOM 中的某个地方有一个静态祖先——关键是要为其附加一个处理程序。

例如：

$('#ancestor-container').on('click', '.closeX', function(e){
  $(this).remove();
});
于 2013-04-18T08:05:02.450 回答
3

删除内联事件处理并分配这样的东西，

$(".closeX").on("click", close_div);
于 2013-04-18T08:05:05.930 回答
0 
function close_div(el) {
    $(el).remove();
}

<div class="closeX" onclick="close_div(this)">The first div</div>
<div class="closeX" onclick="close_div(this)"The second div</div>
<div class="closeX" onclick="close_div(this)"The third div</div>
于 2013-04-18T08:04:05.663 回答