jQuery 在动态内容中不起作用

Question

我的网络应用程序有问题。我在 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);
        }
    });

这是发送给我的 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 会有所帮助。