Question

在我添加div之后，我想提醒点击它，但我似乎无法解决它。我在这里有拼写错误还是有其他原因导致这不起作用？

$(".newsbilder").click(function () {
    var lbox = '<div class="ansicht_gross" style="height:100%; width:100%; background-color: green;">remove</div>';
    $("body").prepend(lbox);
});

$(".ansicht_gross").click(function () {
    alert(1);
});

Answer 1

在注册相同的事件时，具有类.ansicht_gross的元素将不可用。因此，在该上下文中，您必须为其最接近的静态父级委派事件，以使您的代码正常工作。这种过程称为Event delegation

尝试，

$("body").on('click',".ansicht_gross",function () {
    alert(1);
});

Answer 2

您需要在此处使用 event delegation ，因为您的div已动态添加：

$('body').on('click', '.ansicht_gross', function () {
    alert(1);
});

这有助于您将click事件绑定到新添加的.ansicht_gross div。

<强> Fiddle Demo

Answer 3

动态添加的dom元素需要 event delegation 。用法：

$("body").on('click','.ansicht_gross',function () {
  alert(1);
});

<强> Working Demo

Answer 4

你也可以这样做：

$('.newsbilder').click(function () {
    var lbox = $('<div /* attributes */>alert on click</div>');
    $("body").prepend(lbox);
    lbox.click(function () {
        alert(1);
    });
});

值得注意的是，事件委托会导致额外的操作，这些操作不一定是必需的，也就是说，无论何时单击BODY元素，jQuery都会浏览单击的子节点的祖先，以检查它们中的任何一个是否与传递的选择器匹配，碰巧，'.ansicht_gross'。

知道这一点，想象一个脾气暴躁的用户在应用程序的任何地方开始快速点击... = D嗯，它有点扭曲，但请记住，选择器越多，检查越多，比较就越多执行。因此，需要谨慎使用。

进一步阅读：Are there any drawbacks to listen events on document level in jQuery?

Answer 5

使用。

$(".newsbilder").click(function () {
    var lbox = '<div class="ansicht_gross" style="height:100%; width:100%; background-color: green;">alert on click</div>';
    $("body").prepend(lbox);
});

$('body').on('click',".ansicht_gross", function () {
    alert("1");
});

<强> DEMO

预先设置div，然后单击它将其删除

5 个答案: