音頻按鈕在一個模式框中工作，但不在另一個模式框中，爲什麼？

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

這一切工作正常，沒有問題。但在具有基本相似代碼的另一個模式對話框中，對話框顯示「確定」，並顯示所選文本，但音頻不播放。以下是對話內容：

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選擇不起作用。明顯的東西？任何幫助將是非常受歡迎的。謝謝

Answer 1

我看不到所有的代碼，但是如果你有這個點擊事件後，HTML添加到頁面（所以，在你將代碼附加到DOM後，它應該工作。

如果沒有，你只需要使它委派事件。

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