Question

今天早上遇到了问题。我写了以下几行：

var Markup = '<div id="overlay"><h1>Test</h1><a id="close">Close</a></div>';

    $(document).ready(function() {
        $("#link").click(function() {
            $("body").append(Markup);
            $("#overlay").delay(500).animate({"opacity":"0.97"},2000);
        });

        $("#close").click(function() {
            $("#overlay").delay(500).animate({"opacity":"0"},2000);
            $("body").remove(Markup);
        });
    });

当我点击#link时，叠加层显示完美，但#close链接不起作用。什么都没发生。单击#close后，标记仍然存在。

有什么建议吗？

Answer 1

.click()仅适用于调用方法时DOM中的元素，在您的情况下是DOM准备好的时候。您需要使用.on()代替并将click-event委托给父元素（在版本1.7之前，您使用.delegate()代替.on()）。< / p>

$("body").on("click", "#close", function() {
    $("#overlay").delay(500).animate({"opacity":"0"}, 2000, function () {
        $(this).remove();
    });
    // Prevent the default click-behavior
    return false;
});

<强>通知

您应该删除动画完成时执行的回调中的内容。否则，有可能在动画完成之前删除元素。

Answer 2

这样的陈述：

$("#close").click(function() { ... });

......有两个部分。第一部分：

$("#close")

创建一个jQuery对象，其中包含DOM中存在的所有元素，这些元素与当时提供的选择器相匹配。（虽然对于一个id选择器，只有一个，因为id应该是唯一的。）

第二部分：

.click(function() { ... });

将.click()方法应用于调用它的jQuery对象中的任何元素。

在您的情况下，在“close”元素存在之前，您在文档就绪处理程序中运行该行，因此有效地在空jQuery对象上调用.click()并且不绑定任何处理程序。解决此问题的两种方法是在添加元素后运行.click()，或者移动到委托事件模型，其中单击处理程序绑定到父元素（在您的情况下将是正文）：

$("body").on("click", "#close", function() {
   // etc

使用这个委托处理程序，当在主体上发生click事件时，jQuery检查目标元素是否与第二个参数中的选择器匹配，如果是，则调用你的函数。

对于与1.7版之前的jQuery相同的效果，使用.delegate();对于真正的旧jQuery使用.live()。

Answer 3

这是因为当加载页面时，id为close的链接尚不存在，因此事件不会绑定到它。试试.live（）

Answer 4

您要附加元素，并需要委派事件：

$(document).ready(function() {
    $("#link").on('click', function() {
        Markup.appendTo($("body")).delay(500).animate({"opacity":"0.97"},2000);
    });

    $(document).on("click", "#close", function() {
        $("#overlay").delay(500).animate({"opacity":"0"},2000, function() {
            $(this).remove();
        });
    });
});

Answer 5

您需要将事件委托给它

$("body").delegate("#close","click",function() {
            $("#overlay").delay(500).animate({"opacity":"0"},2000);
            $("body").remove(Markup);
        });

jquery .click（函数）不起作用

5 个答案: