聊天消息僅第一次工作

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 成功。 這會讓你失去點擊事件，所以它不會再次觸發。

您可以通過以下方式修復它：

1. 重新加載 div 后重新添加事件（經過測試，但不是很漂亮的代碼）

2. 在http://api.jquery.com/on/上使用而不是單擊（未測試，上次我使用類似這樣的東西稱為“實時”，但現在似乎已棄用）