隱藏一個元素會導致它的父級不會收到點擊

我試圖使用jQuery show（）和hide（）分別顯示和隱藏包含HTML5視頻播放器的播放指示符的div。我可以使用父div（#video）來播放和暫停視頻，但是一旦我隱藏包含播放圖標（#play）圖像的div，點擊功能不再響應，無法暫停視頻。隱藏一個元素會導致它的父級不會收到點擊

任何想法？

我有跟隨的javascript：

$(document).ready(function(){ 

var currentVideo = $('video').get(0); 
var playIndicator = $('#play'); 

$('#video').click(function() { 
    if(currentVideo.paused) 
    { 
     playIndicator.hide(); 
     currentVideo.play(); 
     return false; 
    } else { 
     currentVideo.pause(); 
     playIndicator.show(); 
     return false; 
    } 
}) 

});

和HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <title>Video Test</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
</head> 

<body> 

<div id="container"> 

<div id="video"> 
<div id="play"></div> 
<video id="remoteVideo" poster="redacted" src="redacted" /> 
</div><!-- #video --> 

</div><!-- #container --> 

</body> 

</html>

該文件旨在包含在一個iPad的出版物，從而奇視，和我的節錄海報和視頻文件鏈接，但都按預期工作。

來源

2012-09-21 Steven Sokulski

我會說這是'視頻'現在佔用整個空間（因爲父'＃視頻'會自行調整大小），吸收任何點擊事件的事實。 – ahren

-3

我投試圖jQuery的。對，而不是

$('#video').on('click', function(){ 

//logic goes here 

});

來源

2012-09-21 22:51:40 dude

'.click（）'和'.on（'click'）'沒有區別。爲什麼要解決這個問題？ – jfriend00

@dude：查看jQuery源代碼，調用'$（..）。click（function（）{}）''使用'on（）'，'bind'，'live'和'delegate'。實質上，爲了開始使用'on'要好得多，因爲如果你不使用它，它必須打一個額外的電話然後使用它。但是，像這樣使用'on'很可能無法解決問題。 – Nope

我會說，它是更好的使用，但不是「好多了」。 – Dan

爲什麼不把上#play click事件爲$('#play').click(function() {？

來源

2012-09-22 00:44:30

隱藏一個元素會導致它的父級不會收到點擊

回答

相關問題