音频按钮在一个模式框中工作,但不在另一个模式框中,为什么?
问题描述:
在一个jQuery UI模式对话框中,我有一个访问所选音频文件的按钮。这是对话内容设置:音频按钮在一个模式框中工作,但不在另一个模式框中,为什么?
var form_config ='<div id="t2e_modal"><span id="wrap_user_fb"><img id="user_fb" src="/templates/beez_20/images/e2tw/grey32.png" alt="fb" height="20px" width="20px"></span><p id="eng_text">Please enter the English text here</p><p id="thai_text">กรุณาเขียนเป็นภาษาอังกฤษที่นี่</p><form id="t2e_form" action="#"><input type="text" id="t2e_w" name="t2e_w" autocomplete="off"><input id="t2e_submit" type="submit" value="Submit"><p><span class="fa fa-volume-up fa_volume_t2e"></span></p></form><span id="output"></div>';
/* form config appended to dialog */
jQuery("div#t2e_dialog").append(form_config);
这个播放音频:
jQuery("span.fa-volume-up").on("click",function (evnt) {
var elementId = idClickedEl.replace(/_img/i,""),
pathVar = document.getElementById("pathVar").innerHTML,
oggVar = pathVar+elementId+".ogg",
mp3Var = pathVar+elementId+".mp3",
audioElement = document.createElement("audio");
audioElement.src = Modernizr.audio.ogg ? oggVar : mp3Var;
audioElement.load();
audioElement.play();
});
这一切工作正常,没有问题。但在具有基本相似代码的另一个模式对话框中,对话框显示“确定”,并显示所选文本,但音频不播放。以下是对话内容:
var ws_modal_html = '<div class = "ws_dialog_box"><p class = "ws_dialog_text">Here is the word (in red) in a sentence</p><p class="ws_dialog_thai">คำในประโยค</p><p class = "ws_dialog_sentence"></p><p><span class="fa fa-volume-up fa_volume_ws"></span></p></div>';
ws_dlog.html(ws_modal_html);
jQuery("div.ws_dialog_box p.ws_dialog_sentence").text(modalText);
,这是音频播放部分:
jQuery("span.fa-volume-up").on("click", function(evnt) { //div#wsd_text
alert("hello");
var pathVar = document.getElementById("pathVar").innerHTML,
oggVar = pathVar + "wsde" + idClickedEl + ".ogg",
mp3Var = pathVar + "wsde" + idClickedEl + ".mp3",
audioElement = document.createElement("audio");
audioElement.src = Modernizr.audio.ogg ? oggVar : mp3Var;
audioElement.load();
audioElement.play();
});
当音频按钮(FA-体积增加)被点击,警报(“你好”)做不显示提示jQuery选择不起作用。明显的东西?任何帮助将是非常受欢迎的。谢谢
答
我看不到所有的代码,但是如果你有这个点击事件后,HTML添加到页面(所以,在你将代码附加到DOM后,它应该工作。
如果没有,你只需要使它委派事件。
$('[PARENTSELECTOR]').on('click', '[CHILDSELECTOR]', function() {
/* click event code here */
});
是有可能,你的页面加载后产生第二个模式? – 2014-11-05 02:09:04
HTML的两个块创建'.span.fa -volume-up'元素,并且这两个javascript块都将一个点击处理程序附加到'jQuery(“span.fa-volume-up”)',因此(除非有一些我们不知道的黑魔法)都会单击处理程序重新连接到这两个元素。我不知道这是否是问题,但它看起来似乎不对。 – 2014-11-05 02:29:03