點擊（）jQuery函數不工作在一個簡單的div

我想要獲得一個簡單的click（）方法，當點擊某個div時工作。我看了很多線索，但一直沒有找到解決辦法。這裏是我的jQuery代碼：點擊（）jQuery函數不工作在一個簡單的div

var $Chart = $('#Chart'); 
var $TopBlock = $('#TopBlock'); 

$Chart.hover(function() { 
    //Top Block 
    $TopBlock.hover(function() { 
     $(this).fadeTo('fast', 1); 
     $MiddleBlock.fadeTo('fast', .5); 
     $BottomBlock.fadeTo('fast', .5); 
    }); 

    $TopBlock.click(function() { 
     alert("click handler called"); 
    }); 
});

及相關的HTML代碼：

<div id = "Chart"> 
<div class = "Block" id = "TopBlock"> 
     <div class = "Group" id= "Capstone"> 
      <p>Capstone</p> 
     </div> 
     <!-- Capstone --> 
     <div class = "Competency" id = "CapstoneComp"> 

     </div> 
     <!--Expansion--> 
     <div class = "Expand" id= "CapstoneExpand"> 

     </div> 
    </div> 
</div>

我包括頂部懸停功能，因爲它可以在它自己的。但是，當我添加點擊功能時，一切都會中斷，包括懸停功能。我嘗試移動$ TopBlock懸停之外的點擊功能，但所有事情都破裂了。這應該是一個簡單的點擊功能，我真的不知道爲什麼這不起作用。

編輯：對缺乏相關材料抱歉。這是第一次海報。問題在於當我點擊我的$ TopBlock div時，click（）函數沒有觸發。它應該會觸發一些JavaScript代碼，這會增加我的#Expansion div的尺寸，但我只是希望提醒首先彈出以確保其工作。

來源

2013-12-16 Tim

什麼錯誤？ – dbarnes

所以我們很想看到你的相關（最小/ [SSCCE]（http://sscce.org/））HTML。此外，分配/創建您正在使用的變量的JavaScript。此外，什麼是不工作，除了生成警報，它應該做什麼？ –

我們不知道你的例子是什麼$ TopBlock，或者它已經設置了什麼。 – Mark

就拿：

$TopBlock.click(function() { 
    alert("click handler called"); 
});

出$Chart.hover...事件。另外，請從$Chart.hover...事件中取出$TopBlock.hover...。

所以，你的代碼是：

var $Chart = $('#Chart'); 
var $TopBlock = $('#TopBlock'); 

//Top Block 
$TopBlock.hover(function() { 
    $(this).fadeTo('fast', 1); 
    $MiddleBlock.fadeTo('fast', .5); 
    $BottomBlock.fadeTo('fast', .5); 
}); 

$TopBlock.click(function() { 
    alert("click handler called"); 
});

見Fiddle Example

來源

2013-12-16 19:32:51 FastTrack

也是'$ TopBlock.hover'。您可能不希望在事件處理程序中分配事件處理程序。當外部事件觸發時，它們將被重複添加。 – devinallenaz

@devinallenaz同意！我更新了我的回答 – FastTrack

它的工作原理！我以爲我早先這樣做過，並沒有觸發，但我猜這次有些事情是正確的。非常感謝！同樣很好的知道嵌套事件處理程序不是最好的主意。 – Tim

點擊（）jQuery函數不工作在一個簡單的div

回答

相關問題