第二個.click（）函數不起作用

第一個.click函數用於在容器中添加元素（div），第二個用於將其從容器中移除。該容器最初沒有元素。通過點擊刪除功能是行不通的第二個.click（）函數不起作用

$(document).ready(function(){ 
    $(".class1").click(function(){ 
     //Code for adding element to the container and 
     // removing class1 from it and adding class2 

    }); 

    $(".class2").click(function(){ 
     alert("hi"); //Even the alert is not displayed 
     $(this).fadeOut(100);  
    }); 
});

但是，它的工作原理，如果在頁面加載到容器之前，元素已經存在。任何原因爲什麼？是否因爲document.ready函數？解決方案？

來源

2012-06-22 Udai Arora

給我們您的HTML請。 –

請發佈html – Sudantha

當您將事件添加到'.class2'元素時，您的元素是否已經存在？ –

這是因爲，當你添加點擊處理程序.class2元素，你只需要添加該事件，其中有一個類元素在該特定時刻;例如沒有。

相反，你需要像這樣使用事件委託;

$(document).on('click', '.class2', function() { 
    alert('hi'); 
    $(this).fadeOut(100); 
});

，因爲它結合於document一個事件（其總是存在），該監聽使用事件代理任何.class2元素的點擊次數這將工作。欲瞭解更多信息，請閱讀on()文檔。

來源

2012-06-22 10:29:30 Matt

chrome block this script –

@mohsen：我會仔細檢查一下。代碼並不少見。 Chrome會阻止它非常奇怪。 – Matt

我使用.on函數來動態更改超鏈接鏈接，但chrome阻止了我在超鏈接上的第二次更改。（順便說一下，超鏈接包含（java：win.open ....）但在第一個鏈接沒有問題，第二個動態改變。被所有瀏覽器阻止） –

當您嘗試添加代碼點擊.class2它尚未創建，因爲我明白。嘗試添加點擊事件，您所創建的.class2元素像這樣經過：

$(document).ready(function(){ 
    $(".class1").click(function(){ 
      //Code for adding element to the container and removing class1 from it and adding class2 

     $(".class2").click(function(){ 
      alert("hi");   //Even the alert is not displayed 
      $(this).fadeOut(100); 

     }); 
    }); 
});

來源

2012-06-22 10:29:28 devsnd

這將爲現有的'.class2'元素添加一個事件處理程序。 – Matt

是的，你是對的。你的答案是正確的。謝謝：我不知道在jquery中的代表團！ – devsnd

對兩個類都使用委託事件處理程序（如果您在兩者之間切換，或者如果您不回到class1那麼第二個就足夠了），因爲在更改class後，元素被視爲動態。

$("#container").on("click", ".class1", function(){ 

}); 

$("#container").on("click", ".class2", function(){ 

});

這裏#container指的是那些類的父親，你可能有別的東西。

來源

2012-06-22 10:29:34 thecodeparadox

當函數被詳細闡述時，不能將事件轉換爲不存在的元素。但是，你可以創建一個包裝元素（DIV）圍繞「1類」和「類2」，像這樣：

<div id="class1_wrapper"> 
    <span class="class1"> 
</div>

我用「跨度」類class1，因爲我不知道它是哪個元素。然後，而不是點擊事件，您可以使用「上（）」：

$("#class1_wrapper").on("click", ".class1", function() 
{ 
    //Code for adding element to the container and removing class1 from it and adding class2 
});

這樣一來，即使class1的是不存在的（同樣可以爲Class2中完成），單擊事件將運行

來源

2012-06-22 10:33:27

感謝馬特糾正我的錯字:) –

第二個.click（）函數不起作用

回答

相關問題