聊天消息仅在第一次有效

Question

我有一个消息框。当我点击提交时，它只在第一次有效。 onclick 事件是否已删除？

代码是这样的:-

$("#message-box #send-message-btn").click(function(){
    var messageText=$("#message-box #textarea").val();
    $.get("getUserName",function(username,status){
        $.get("getUserByUserName?username="+username,function(user,status){
            var sentFrom=user.userId;
            var today=new Date();
            var today=getDateInFormat(today);
            today=today+"Z";
            var time=today;

            var ajaxData= {
                messageTypeId,
                messageText,
                messageReference : referenceId,
                context,
                sentFrom,
                time
            }

            $.ajax({
                url:"/addMessages",
                data: JSON.stringify(ajaxData),
                type: "POST",
                headers: { 
                    'Accept': 'application/json',
                    'Content-Type': 'application/json' 
                },
                success : function(data) {
                    console.log("inside sucess of add messages");
                    
                     $.get("/getMessagesByTypeContextReference?referenceId="+referenceId+"&&context="+context+"&&messageTypeId="+messageTypeId,function(messages,status){
                        var gets=[];

                        $.each(messages,function(i,message){
                            message.timestamp=getDateInFormat(new Date(message.time).addHours(-8));
                            gets.push($.get("getUserByUserId?userId="+message.sentFrom,function(user,status){
                                message.sentFromName=user.firstName+' '+user.lastName;
                            }));
                        })

                        $.when.apply($,gets).then(function(){

                            rowData.messages=messages;

                            $("#message-box").html('');
                            callHandlebars("#message-box","message-form-template",[],rowData);
                        })
                        

                    })

                },
                error : function (exception) {
                    console.log("exception :"+exception);
                }
            });
        })
    })
})

在我的数据库中提交消息后，我正在重新加载消息框 html。那是删除事件处理程序吗？解决方法是什么？

Answer 1

您正在重新加载整个 div 成功。这样会让你失去点击事件，所以不会再触发。

您可以通过以下方式修复它：

重新加载div后重新添加事件（测试过，但不是很漂亮的代码）
在http://api.jquery.com/on/上使用而不是点击（未测试，上次我使用类似的东西被称为"live"，但现在似乎已弃用）

Answer 2

您使用此选择器 $("#message-box #send-message-btn") 附加了点击，但在您的成功回调中，您似乎重新加载了 message-box 中的所有内容，因此按钮 send-message-btn 将被替换并且任何附加事件都将丢失.您可以使用事件委托来保持这些事件的附加，或者在替换 message-box 的 HTML 之后简单地重新附加它们。

要让他们与委派联系在一起，请尝试替换：

$("#message-box #send-message-btn").click(function(){

与：

$("#message-box").on('click', '#send-message-btn', function () {

这会将事件附加到 message-box，并且由于事件冒泡允许 message-box 将事件传递回 send-message-btn，即使他已在 DOM 中被替换.

聊天消息仅在第一次有效

Chat message only working for the first time

javascript

ajax

jquery

jquery-events