The conversation message only works for the first time

advertisements

I have a message box . When I click on submit it only works fr the first time . Are the onclick events removed ?

The code is like this :-

$("#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);
                }
            });
        })
    })
})

After submitting the message in my database I am reloading the message box html. Is that removing the event handler ? What is the solution ?


You attach the click with this selector $("#message-box #send-message-btn") but in your success callback it looks like you reload everything in message-box so the button send-message-btn would be replaced and any attached events lost. You can use event delegation to keep those events attached or simply reattach them after replacing the HTML of message-box.

To leave them attached with delegation try replacing:

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

with:

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

This attaches the event to message-box and because of event bubbling allows message-box to pass the event back to send-message-btn even after he has been replaced in the DOM.