jquery .click（功能）不工作

今天早上遇到了问题。我写了以下几行：jquery .click（功能）不工作

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链接不起作用。没有任何反应。单击＃关闭后，标记仍然存在。

有什么建议吗？

来源

2012-07-25 user1462382

的.click()只对元素工作当方法被调用时，它们在DOM中，在你的情况下是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-25 07:39:48

+1好解释，好旁注。 – Christoph 2012-07-25 07:42:34

有一点需要注意'on'需要Jquery 1.7或更高版本..如果你有一个早期的版本..操作代理' – coolguy 2012-07-25 07:43:47

或live（） - 并且不应该“返回false”以防止将来的操作？ – Piter 2012-07-25 07:45:11

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

来源

2012-07-25 07:38:53 Leon

['.live（）'is deprecated]（http://liveisdeprecated.com）。改用'.on（）'（jQuery 1.7+）或'.delegate（）'。 – 2012-07-25 07:39:27

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

$(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-25 07:38:54 adeneo

您需要将事件委托给它

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

来源

2012-07-25 07:39:05 coolguy

像这样的语句：

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

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

$("#close")

创建包含存在于供给选择器在那一刻匹配该DOM所有元素jQuery对象。（虽然对于id选择，将仅存在一个自ID应该是唯一的。）

第二部分：

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

施加.click()方法的任何要素是在jQuery对象，它被称为上。

在你的情况下，在“close”元素存在之前，你正在文档就绪处理程序中运行该行，因此实际上你在空的jQuery对象上调用.click()并且没有绑定处理程序。这两种方式来解决这个问题所添加的元素之后运行.click()，或者移动到单击处理程序绑定到父元素委派事件模型（在你的情况，这将是身体）：

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

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

对于与版本1.7之前的jQuery相同的效果，使用.delegate();对于确实老jQuery使用.live()。

来源

2012-07-25 07:58:57 nnnnnn

jquery .click（功能）不工作

回答

相关问题