How to make html appended with javascript call a javascript function?

Question

I currently have two parts: an interactive chat, and a couple functions that can dynamically add tabs and remove them again. As you might expect I now want to merge them so that you can have a chat within each tab. The way I'm now trying that is by merging all functions in one script, and upon adding a new tab, simply appending the textarea and conversation-div (to hold messages) that I need to run the chat. The problem is that when I hit the send button it doesn't seem to call the function sendMessage().

So I add the html dynamically is like this:

function addTab() {
    $('#pageTab').append(
        $('<li><a href="#usertab' + this.id + '">' + this.id +
            '<button class="close" type="button">×</button></a></li>'));
    $('#pageTabContent').append($('<div class="tab-pane" id="usertab' + this.id 
        +'"><form id="send_message_form"><textarea id="messageText" rows="1" cols="25"></textarea></br>'
        + '<input type="button" id="sendButton" value="Send Message"></form>'
        + '<div class="conversation"></div></div>'));
    $('#page' + this.id).tab('show');
}

and instead of the sendMessage I simplified the click action like this:

$("#sendButton").click(function(){
    alert("BEHOLD, I AM ALIVE!!");
});

But unfortunately no alert pops up. Does anybody know how I can get this to work? All tips are welcome!

(a paste of the full code that I have is right here)

[EDIT] Thanks for the help! I now indeed can show the alert button. The strange thing is that when I subsequently call another function from within this one to POST a message to the server, it does nothing.

So I now call sendMessage from within the on("click" like below. Although it now does show the "BEHOLD, I AM ALIVE!!" and also the "BEHOLD, We're in the sendMessage.", Firebug shows that it doesn't do the POST, even though I use this very same message in another page (without the tabs) where it does work. Any ideas what's wrong with this then?

function sendMessage(message, user_id) {
    alert("BEHOLD, We're in the sendMessage.");
    $.ajax({
        type: "POST",
        contentType: "application/json",
        accepts: "application/json; charset=utf-8",
        url: "/api/support/" + "1",
        data: JSON.stringify({
            'action': 'ADD_MESSAGE',
            'user_id': user_id,
            'message': message
        }),
        dataType: "json",
        success: function(data) {
            alert("BEHOLD, I have posted!!");
            updateConversation();
        }
    });
}

$(".container").on("click", "#sendButton", function() {
    alert("BEHOLD, I AM ALIVE!!");
    var text = $("#messageText").val(); // Get the text
    sendMessage(text, 1);
});

Reinstate Monica Cellio · Accepted Answer · 2014-02-06 11:39:38Z

2

This is a delegation issue. The button doesn't exist at the time that you try to assign the event handler to it. There are two ways you can handle this. You can either move the click event handler assignment to the addTab() function, after the code has been appended, or you can change it to this...

$("#pageTab").on("click", "#sendButton", function(){
    alert("BEHOLD, I AM ALIVE!!");
});

I'd recommend looking at the documentation for .on()...

http://api.jquery.com/on/

Edit:

As for your data posting issue, try changing the code to this...

$.ajax({
    type: "POST",
    contentType: "application/json",
    accepts: "application/json; charset=utf-8",
    url: "/api/support/1",
    data: {
        action: 'ADD_MESSAGE',
        user_id: user_id,
        message: message
    },
    dataType: "json",
    success: function(data) {
        alert("BEHOLD, I have posted!!");
        updateConversation();
    }
});

The only significant difference is that it's allowing jQuery to send the data as JSON, rather than you converting it first. Let us know how you get on with that.

edited Feb 6, 2014 at 11:39

answered Feb 6, 2014 at 10:27

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kramer65 Over a year ago

Thanks, that indeed works! The strange thing is that it does seem to call that alert, but when I subsequently call another function from within this function, it doesn't do a POST from there (I added something to the initial question). Any idea what could be wrong there?

kramer65 Over a year ago

Thanks for the suggestion in the edit, but unfortunately, that doesn't work either. Both Firebug and the server itself indicate that the Javascript makes no call whatsoever. Would you have any other idea?

Reinstate Monica Cellio Over a year ago

What happens if you manually run sendMessage from the console? (Just trying to figure out if the problem is in that function, or in the click event handler - they both look fine).

Andy · Accepted Answer · 2014-02-06 10:29:54Z

2

The useful terms here are event delegation and bubbling. You can't attach an event listener to an element that doesn't exist yet, but you can attach a listener to a parent element so that when you add the new element to the DOM the event bubbles up.

In this case you can probably get away with using #pageTab rather than document.

$('#pageTab').on('click', '#sendButton', function(){
  alert("BEHOLD, I AM ALIVE!!");
});

answered Feb 6, 2014 at 10:29

Andy

63.6k13 gold badges72 silver badges99 bronze badges

1 Comment

kramer65 Over a year ago

Thanks! That works! The strange thing is that a POST function which I call subsequently from thsi function doesn't work. I added that to my initial question. Any idea what could be wrong with that?

dcodesmith · Accepted Answer · 2014-02-06 10:33:07Z

1

#sendButton is created dynamically, so you need to use even delegation. Attach the click event the to the '#pageTab' and then delgate it to #sendButton. Basically the element doesn't exist when you bind the click event to it

$('#pageTab').on('click', '#sendButton', function(){
    alert("BEHOLD, I AM ALIVE!!");
});

edited Feb 6, 2014 at 10:33

answered Feb 6, 2014 at 10:25

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

1 Comment

Andy Over a year ago

Perhaps you could explain why this is the answer.

francadaval · Accepted Answer · 2014-02-06 10:27:17Z

0

You must add the event response to a parent, for example:

$("#pageTab").click( "#sendButton", function(){ ... } )};

When you create the event response it doesn't matter if there is not any button. In your example if there is not any buttom the function is not associated with the event.

answered Feb 6, 2014 at 10:27

francadaval

2,5313 gold badges26 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to make html appended with javascript call a javascript function?

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related