0

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

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 后标记仍然存在。

有什么建议么？

4

5 回答 5

3

调用方法时对DOM中元素的.click()唯一工作，在您的情况下是当DOM准备好时。您需要改为使用.on()并将单击事件委托给父元素（在 1.7 版之前，您使用.delegate()了代替.on()）。

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

注意

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

于 2012-07-25T07:39:48.967 回答
1

像这样的声明：

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

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

$("#close")

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

第二部分：

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

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

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

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

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

为了与 jQuery 1.7 之前的效果相同，请使用.delegate(); 对于真正古老的 jQuery 使用.live()。

于 2012-07-25T07:58:57.877 回答
0

这是因为当页面加载时，id 为 close 的链接还不存在，所以事件没有绑定到它。试试 .live()

于 2012-07-25T07:38:53.423 回答
0

您正在附加元素，并且需要委托事件：

$(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();
        });
    });
});
于 2012-07-25T07:38:54.780 回答
0

您需要将事件委托给它

$("body").delegate("#close","click",function() {
            $("#overlay").delay(500).animate({"opacity":"0"},2000);
            $("body").remove(Markup);
        });
于 2012-07-25T07:39:05.817 回答