页面加载后触发点击功能答案

【问题标题】：Trigger click function after page load页面加载后触发点击功能
【发布时间】：2016-02-14 12:14:21
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $('#play')[0].click();//initial click on 'play' button to play music which doesn't seem to be working...
  $('#play').on('click',function(){
    $("#Audio1")[0].play();
})
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <audio id="Audio1" controls="controls" 
src="http://themes.rascals.eu/eprom/dark/wp-content/uploads/2012/11/Madoff-Bomp.mp3" type="audio/mp3" >
</audio>
 HTML5 Audio is required for this example. 

<input type="button" id="play" value="play" />
 
  
</body>
</html>

我想在“播放”按钮上触发点击事件来播放音乐。

我需要这样做，因为“自动播放”在移动设备上不起作用。

由于数据问题，默认屏蔽。

我找到了这篇文章，http://makandracards.com/makandra/13893-autoplay-html5-audio-in-chrome-for-android-mobile-safari-in-ios，结果他是对的，好像我点击了手机上的播放按钮，音乐按预期播放。

我想在页面加载后触发该按钮被点击。它不起作用，但如果我在 CONSOLE 中运行相同的 js，它就会起作用。

编辑 1

根据评论中给出的建议，我已经尝试过了，但仍然没有运气。

$(document).ready(function() {
  $('#play').on('click', function() {
    $("#Audio1")[0].play();
  })
  $('#play')[0].click(); //initial click on 'play' button to play music which doesn't seem to be working...
});

【问题讨论】：

初始点击是指它第一次不起作用或根本不起作用？尝试在第一行调用 $("#Audio1")[0].play() 。甚至在绑定到元素之前无需触发事件。也不需要索引 [0]，因为按 Id 搜索总是返回第一个元素。
$('#play')[0].click() 应该在 ` $('#play').on('click',function(). Also if you are having id, why is $('#play')[0].click()@ 之后987654326@$('#play').click()`。拥有多个具有相同 id 的元素是一种不好的做法
@Diljohn5741 通过调用 $("#Audio1")[0].play() 肯定可以在桌面浏览器上工作，但我需要它也可以在移动浏览器上工作，这就是我需要的原因模拟该按钮上的点击事件，我希望这是有道理的，谢谢
@Geoffreyirl 我已恢复您上次的编辑。永远不要改变原来的问题。如果您认为某人的建议添加了某些内容，请将其添加到底部。
@Rajesh 谢谢你知道了

标签： javascript jquery html events triggers

【解决方案1】：

您需要在点击操作之前注册您的点击事件：

<script type="text/javascript">
    $(document).ready(function() {
        $('#play').on('click',function(){
            $("#Audio1")[0].play();
        });
        $('#play')[0].click();//initial click on 'play' button to play music which doesn't seem to be working...

    });
</script>

编辑

问题不是因为您的点击操作。点击事件按预期工作，但 Apple 已明确禁用自动播放，直到用户通过文章中所述的用户操作（用户点击播放按钮）启动它：

Safari HTML5 Audio and Video Guide

如果您输出<audio> 元素，您会看到<audio> 的paused 属性在渲染时自动设置为'true'。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#play').on('click',function(event){
            $("#Audio1")[0].play();

            var myplay = document.getElementById('Audio1');
            var log = document.getElementById('screenlog');
            for (var prop in myplay) {
                log.innerHTML += prop + ":" + myplay[prop] + "<br>";
            }
        });
        $('#play')[0].click();

        });
    </script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body>
<audio id="Audio1" controls="controls"
       src="http://themes.rascals.eu/eprom/dark/wp-content/uploads/2012/11/Madoff-Bomp.mp3" type="audio/mp3" >
</audio>
HTML5 Audio is required for this example.
<div id="screenlog"></div>
<input type="button" id="play" value="play" />


</body>
</html>

【讨论】：

感谢您的回复，它仍然只能在桌面浏览器而不是移动设备上运行，如果我使用手机上的任何浏览器打开它，我就有链接 geoffreydev.com/testing.html工作...