Question

我的网络应用程序存在问题。我在Ajax中创建了一个tchat，我想在点击按钮时加载它。它可以工作，但加载的动态数据不支持jQuery。

当我点击按钮时，我会动态更改div的内容，最初为空。但是在这个查找器（打开）上我有一个链接，它应该只是在改变div的高度时加载表情符号，最初为0 px。

我已经完成了测试，当我点击按钮时，高度变化很好，但屏幕上没有任何内容。

以下是我聊天的截图：

enter image description here

当我点击笑脸时，我应该看到：

enter image description here

但什么都没发生。

以下代码工作正常，因为高度已经改变（我已经测试过了）：

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

这是发送给我的JSON代码，我在我的div上：

> 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会有所帮助。

jQuery不适用于动态内容

1 个答案: