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

您使用此选择器$("#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中替换它。

Answer 2

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

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

重新加载div后重新添加事件（已测试，但代码不是很漂亮）
在http://api.jquery.com/on/上使用而非点击（未经测试，上次我使用此类内容时称为“直播”，但现在似乎已弃用）

聊天消息只在第一次工作

2 个答案: