0

.on()我一直在尝试找出jQuery 1.7.x 及以后版本提供的相对较新的（至少对我来说，我猜）方法。live(), bind()到目前为止，我们一直在代码中使用来处理事件处理程序，并且由于似乎存在性能问题，我们正在考虑进行大修。.live()所以这是我的问题。这是我的页面中的页面结构：

    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <div id="default"></div>
        <div class="close">Close</div>
        <div id="extras">//some random stuff// </div> 
    </div>

我创建了一个对象来存储常用的选择器，例如$(document), $("#header"), $("#footer")：

   var elements = {
        $doc: $(document),
        $foo: $("#footer"),
        $head: $("#header")
   };

.close点击内部的预期行为#footer是#extras必须隐藏在视图之外。我试图将 click 事件绑定.close到#footer（委托），如下所示：

elements.$foo.on("click","div.close",hideFooter)

这不起作用。但是，如果一定要elements.$doc这样：

elements.$doc.on("click", "div.close", hideFooter);

它有效。但这不就是这样.live()吗？（如果每次点击都应该转到 DOM 开始并冒泡到div.close）

我在这里做错了吗？

EXTRA INFO 匿名函数的内容hideFooter是：

    function hideFooter(event) {
        $(event.currentTarget).next().hide("slow")
                              .closest("#footer").css({ "opacity": "0.8" });
        $("#default").show();
    }

default.js 中的代码序列

    var elements = {
            $doc: $(document),
            $foo: $("#footer"),
            $head: $("#header")
       };

  elements.$doc
       .ready(function () {
         elements.$foo.on(events.click, "div.close", hideFooter);
       })
      .on(events.click, "#content", HideHeaderFooter)
      .on(events.hover, "#footer", showFooter);
4

3 回答 3

3

为了确保在footer脚本运行之前加载元素，您可以将脚本放在页面底部。

<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <div id="default"></div>
        <div class="close">Close</div>
        <div id="extras">//some random stuff// </div> 
    </div>

    <script src="/default.js" type="text/javascript"></script>

</body>

或者，如果您希望您<script>在<head>页面中，您可以将代码包装在 jQuery.ready()处理程序中，以便在页面加载之前它不会运行。

$(function() {
       // Code in here will not run until the rest of the page has loaded.
    var elements = {
            $doc: $(document),
            $foo: $("#footer"),
            $head: $("#header")
       };

    elements.$doc
      .on(events.click, "#content", HideHeaderFooter)
      .on(events.hover, "#footer", showFooter);
    elements.$foo.on("click","div.close",hideFooter);
});

因此，现在您的代码将延迟到页面加载完毕，因此您的footer元素将存在并准备好进行 DOM 选择。

于 2012-10-24T17:28:56.890 回答
1

你为什么不把它放在处理程序中呢？这应该有效：

elements.$foo.on("click","div.close", function() {
     $(this).next().hide("slow").closest("#footer").css({ "opacity": "0.8" });
});
于 2012-10-24T17:36:11.697 回答
0

你有这个

elements.$foo.on("click","div.close",HideFooter)

你是这个意思吗？

elements.$foo.on("click","div.close",hideFooter)

注意函数名称中的“H”。

于 2012-10-24T17:10:51.183 回答