1

我有一个按钮播放声音文件的问题。

有两个按钮，一个是启用声音按钮，另一个是在单击时播放声音。基本上，只有“启用”类的按钮会播放声音，但是当我将按钮的类设置为启用然后单击它时，什么也没有发生。

这里的工作示例

这是代码：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
    $(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://cd.textfiles.com/10000soundssongs/WAV/DOORBELL.WAV');

    $('.enabled').click(function() {
    audioElement.play();
});
});
</script>
<script>
  $(document).ready(function() {
  $('#enabler').click(function() {
  $('.disabled').attr('class','enabled');
  $('.enabled').text('Play (enabled)');
});
});
</script>
<style>
.enabled{color:green;}
</style>
</head>
<body>
<button class="disabled">Play</button>
<button id="enabler">Make Play-Button work</button>
</body>
</html>

一如既往，非常感谢任何帮助！

4

2 回答 2

2

问题是，当您为选择器启动click事件侦听.enabled器时，没有任何具有该类的元素enabled可以将函数绑定到。您需要将事件侦听器绑定到存在的父元素，以便在单击按钮时它将运行该函数。

你需要改变

$('.enabled').click(function() {
    audioElement.play();
});

到

$(document).on('click', '.enabled', function() {
    audioElement.play();
});

这是一个显示这一点的jsbin。

于 2013-01-17T21:15:06.830 回答
0 
<button id="enabler">Make Play-Button work</button>

您在这一行有错误，它的启用程序和需要启用它:-)

于 2013-01-17T21:00:31.853 回答