JQuery append is not working inside a JQuery click function

Question

So I am trying to append a logo in a RichText editor immediately after the user hits "Go" and before the new page loads.

$('#Go').on('click', function (e) {
    e.preventDefault();
    $.get(url, function(data) {
        var html = '<img src="' + data + '" width=100px height=100px></img>';
        $('.EditorFrame').contents().find('body').append(html);
    });
});

Just as I hit "Go", the image briefly appears in the editor before the new page is loaded. The new page - which shows nothing but the result of our editing comes out blank! I have tried this with plain text as well - same story.

I have tried hard to debug. For instance, putting:

console.log($('.EditorFrame').contents().find('img'));

immediately after the append line, does print out the img tag!

Interestingly, when I copy/paste the same code in the console and then press "Go", everything works as normal and I can see the image, text whatever I put in the editor.

I am using the latest Google Chrome for my labors.

does it work if you change ></img> to />. Images are self-closing tags — TimCodes.NET
– TimCodes.NET, Commented May 3, 2014 at 22:13
"Just as I hit "Go", the image briefly appears in the editor before the new page is loaded." What do you mean "new page is loaded?" Any changes made to the current DOM will be lost once a new page is loaded - including during any postbacks. It may be worth ensuring that your button has "type='button'" specified on it, to make sure you're not accidentally posting your form back to the server. — Knetic
– Knetic, Commented May 3, 2014 at 22:16
If #Go is a type="submit" button, then the <form>'s 'submit' event is what needs e.preventDefault(). The 'click' event alone isn't what causes the navigation. — Jonathan Lonowski
– Jonathan Lonowski, Commented May 3, 2014 at 22:16
...you might remove the action from your form (assuming as others have said that this button is in a form) — drew_w
– drew_w, Commented May 3, 2014 at 22:17
Thanks all. The fundamental problem here is that the same code is running perfectly fine in the console and yet not in the script. In this, I believe @rob-m is pointing in the right direction. — Ali Zaidi
– Ali Zaidi, Commented May 4, 2014 at 5:50

Rob M. · Accepted Answer · 2014-05-03 22:23:46Z

2

You are racing your async get method and next page load. You probably should return false in your click handler and go to the next page (if that's what you desire) in the success callback of your get request:

$('#Go').on('click', function (e) {
    e.preventDefault();
    $.get(url, function(data) {
        var html = '<img src="' + data + '" width="100" height="100"></img>';
        $('.EditorFrame').contents().find('body').append(html);
        // go to next page here
    });
    return false;
});

Also, width and height attributes should not have "px" and should just be numeric values

answered May 3, 2014 at 22:23

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

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

1 Comment

Ali Zaidi Over a year ago

Wonderful. One little problem though. In order to go to the next page, I am having to trigger the click event. But before that, I have to 'off' the handler least we get stuck in the handler trigger loop --- $('#Go').off('click').click(); Interestingly, the click event does not fire here. I am having to manually click the #Go button. I would really appreciate if you could bail me out again.

Collectives™ on Stack Overflow

JQuery append is not working inside a JQuery click function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related