jQuery在動態內容中不起作用

Question

我的Web應用程序有問題。 我已經在Ajax中創建了一個tchat，我希望在單擊按鈕時將其加載。 它可以工作，但是加載的動態數據不支持jQuery。

當我單擊按鈕時，我會動態更改div的內容，最初是空的。 但是在這個查找器（打開）上，我有一個鏈接，該鏈接應該僅在更改div的高度時加載笑臉，該高度最初為0 px。

我已經進行了測試，當我單擊按鈕時，高度已經很好地改變了，但是屏幕上沒有任何顯示。

這是我的聊天屏幕截圖：

當我單擊笑臉時，我應該看到：

但是什么也沒發生。

這是因為高度已更改（我已經測試過）的代碼，可以正常工作：

var elm = window.document.getElementById('myCGU_Appear-1');
if (elm.style.height == "0px")  {
    elm.style.height = "100px";
    elm.style.overflow = "auto";
    window.document.getElementById('appear_emoticon-1').src = "/assets/images/emoticons/my_small_emoticons_000.png";
} else {
    elm.style.height = "0px";
    window.document.getElementById('appear_emoticon-1').src = "/assets/images/emoticons/my_small_emoticons_01.png";
}

我想我在某個地方犯了一個錯誤，因為昨天的代碼運行良好...

這是加載tchat的代碼：

$.ajax({
        url:"/scripts/ajax/load_tchat.php",
        type: "POST",
        data: "method_call=open",
        dataType: "json",
        success: function(data){
            console.log(data);

            if(data.tchat_operation == 'open') {

                // load datas
                $("#frameChat").html(data.tchat_content);

                // open the tchat
                frameChat.classList.remove("Espace-Chat-Ferme");
                frameChat.classList.add("Espace-Chat");

            }
        },
        error: function(resultat, statut, erreur){
            console.log(resultat);
            console.log(erreur);
        }
    });

這是發送給我且位於div上的JSON代碼：

> this.tchat_content
< "
[...]

    <div style=\"position: absolute; bottom: 5px; width:280px; class=\"myBackgroundGreyLight\">
        <div class=\"section group\">
            <div class=\"col span_1_of_1\"><div id=\"myCGU_Appear-1\" name=\"myCGU_Appear-1\" style=\"height:0px;margin-bottom:2%;-webkit-transition:all 0.2s ease-in;transition: 0.5s ease-in-out;overflow: hidden;display:block;\" class=\"myBackgroundGreyLight\">All emoticons</div>

    <a href=\"#\" onclick=\"My_CGU_Appear2(-1,5000)\" class= \"button scrolly\" >
        <img id=\"appear_emoticon-1\"  src=\"/assets/images/emoticons/my_small_emoticons_01.png\" width=\"6%\">
    </a><div class=\"fileUpload\">  
                <input type=\"file\" accept=\"image/x-png, image/gif, image/jpeg, image/jpg\" id=\"imgInp-1\" />
            </div>

    <div>
        <a href=\"#ouvre_photo\" onclick=\"AddImageInInput2(this,-1);\">
            <img id=\"blah-1\" src=\"\" alt=\"\" />
        </a>
    </div><div contentEditable=\"true\" class=\"contact_message\" id=\"txt_comments-1\" onkeyup=\"ia_content_analysis(-1, event,2);\" style=\"background-color:white;max-height:125px;overflow-y:auto;overflow-x:hidden;min-height: 50px;\"></div>

<div id=\"test-1\" style=\"float:right;\">
    <h4>&nbsp;</h4>
</div>

<div id=\"callback_-1\" style=\"font-size:11px;margin-top:10px;\"></div>

<div style=\"clear:both; display:block; height:10px;\"></div>

<div style=\"display:inline-block;width:100%;\">
    <a style=\"display:inline-block;background-color:#bf0e07;float:right;border-radius:4px;padding:5px;cursor:pointer;width:50px;text-align:center;font-size:12px;color:white;\" rel=\"-1\" class=\"publish_message\">Publier</a>
</div>
            </div>
        </div>
    </div>

    <script src=\"/assets/javascript/jquery.min.js\"></script>
    <script src=\"/assets/javascript/My_JSFunctions.js\"></script>
    <script src=\"/assets/javascript/ajax.js\"></script>"

謝謝，如果您能幫助我或告訴我正確的方法:)

Answer 1

您尚未在表情按鈕上設置任何事件處理程序。 通過ajax加載HTML數據后，如果您已通過ID進行設置，則必須重新初始化先前在元素上設置的所有事件處理程序。 因此，您不必嘗試一直重新初始化：

$(document).on('click', '#yourButtonId', function() { /* my logic */ });

而不是直接在動態內容上分配事件處理程序。 我希望我沒錯。 否則，提供JSFiddle將有所幫助。