2012-07-25 197 views
0

今天早上遇到了問題。我寫了以下幾行: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鏈接不起作用。沒有任何反應。單擊#關閉後,標記仍然存在。

有什麼建議嗎?

回答

3

.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; 
}); 

注意

您應該刪除在完成動畫時執行回調的內容。否則,在動畫完成之前,元素有可能會被移除。

+0

+1好解釋,好旁註。 – Christoph 2012-07-25 07:42:34

+0

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

+0

或live() - 並且不應該「返回false」以防止將來的操作? – Piter 2012-07-25 07:45:11

0

這是因爲頁面加載時,id爲close的鏈接還沒有存在,所以事件沒有綁定到它。嘗試.live()

+2

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

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(); 
     }); 
    }); 
}); 
0

您需要將事件委託給它

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

像這樣的語句:

$("#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()