.on（）在jQuery不能用於委託事件

我一直在試圖找出相對較新（至少對我來說，我猜）.on()提供的方法與jQuery版本1.7.x起。我們在我們的代碼中一直使用live(), bind()來處理事件處理程序，因爲performance issues似乎有.live()。所以這是我的問題。這是頁面結構我在我的網頁：.on（）在jQuery不能用於委託事件

<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必須隱藏的看法。我試過的.close click事件綁定到#footer（委託）是這樣的：

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

沒有工作。但是，如果綁定到elements.$doc這樣的：

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

IT WORKS。但是，這不是如何.live()的作品？（如果每次點擊它應該去DOM開始並且泡到div.close）

我在這裏做錯了什麼？

EXTRA信息 匿名函數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);

來源

2012-10-24 krishgopinath

當您做dom選擇時是否存在頁腳元素？ '$ foo：$（「＃footer」），'如果不是，則需要延遲選擇，直到元素加載完畢。 –

@ user1689607是的，它存在。 – krishgopinath

那麼，只要在代碼運行之前加載了'＃footer'元素，就可以正確地執行它。需要查看更多代碼才能知道發生了什麼。 –

爲確保在腳本運行之前加載了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-24 17:28:56

+1這必須是原因 - 在我的小提琴，如果我做一個無包裝（頭）它不會工作..但onDomReady工作正常 –

你是歡迎。 –

你有這樣的

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

你的意思是？

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

注意函數名中的'H'。

來源

2012-10-24 17:10:51 MKS

當我在這裏輸入時，這是錯字:)改變:) – krishgopinath

你爲什麼不把它放在處理程序中？這應該工作：

elements.$foo.on("click","div.close", function() { 
    $(this).next().hide("slow").closest("#footer").css({ "opacity": "0.8" }); 
});

來源

2012-10-24 17:36:11 st3inn

只是做到了。謝謝。 – krishgopinath

.on（）在jQuery不能用於委託事件

回答

相關問題