Question

我正在尝试使用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出版物中，因此是奇数视口，我已经编辑了海报和视频文件链接，但两者都按预期工作。

Answer 1

为什么不将#play上的点击事件设为$('#play').click(function() {？

Answer 2

我投票试试jquery .on而不是

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

//logic goes here

});

隐藏元素会导致其父级不接收点击

2 个答案: