Question

在一个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();
});

一切正常，没问题。但是在另一个具有基本相似代码的模态对话框中，对话框显示OK，选定的文本就位，但音频不播放。这是对话框内容：

  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-volume-up）时，不会显示警告（“hello”），表明jQuery选择不起作用。有什么明显的??任何帮助都会非常受欢迎。感谢

Answer 1

我无法看到您的所有代码，但是如果您将html添加到页面后有点击事件（那么，在您将其附加到DOM的代码之后，它应该工作

如果没有，您只需要将其作为委托事件。

$('[PARENTSELECTOR]').on('click', '[CHILDSELECTOR]', function () {
    /* click event code here */
});

音频按钮在一个模态框中工作但在另一个模式框中不工作，为什么？

1 个答案: