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（功能）不工作

回答

相關問題