jQuery's ajax() does not work if jQuery is loaded dynamically

Question

I am trying to use jQuery's post() and get() but they are not working. I do not have HTML so I am loading jQuery this way:

var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
document.head.appendChild(script);

Seems like it is successfully loaded. Checked using window.jQuery in the console.

Right after I create a button:

var btn = document.createElement("button");
btn.id = 'gogogo';
var txt = document.createTextNode("Go");
btn.appendChild(txt);
document.body.insertBefore(btn, document.body.childNodes[0]);

Button successfully created.

Right after this I have the desired post():

$("#gogogo").click(function () {
    var txt = '123';
    $.post("/users", {qwe: txt}, function(result){
            alert(result);
    });
});

But nothing happens at all. NET section in FireBug remains empty while clicking on the button.

Somebody knows what I am doing wrong?

possible duplicate of Event binding on dynamically created elements? — D4V1D
– D4V1D, Commented Sep 28, 2015 at 13:21
Event delegation is required. Best way to set up events to dynamic elements. — IonDen
– IonDen, Commented Sep 28, 2015 at 13:21

Akki619 · Accepted Answer · 2015-09-28 13:38:46Z

2

Use .on event of jQuery, As you are dynamically creating element i.e event delegation.

For ex.

$(document).on("click","#gogogo",function () {
    alert("Inside #gogogo event handler");
    var txt = '123';
    $.post("/users", {qwe: txt}, function(result){
            alert(result);
    });
});

edited Sep 28, 2015 at 13:38

answered Sep 28, 2015 at 13:20

Akki619

2,4326 gold badges29 silver badges58 bronze badges

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

4 Comments

Akki619 Over a year ago

what you see on console? Put a alert updated in my answer to see are you inside the event handler or not.

gaekaete Over a year ago

The console is empty and nothing happens.

Akki619 Over a year ago

did the alert show up alert("Inside #gogogo event handler");

Akki619 Over a year ago

it should work. check if DOM has button with id.remove post call. just see if the handler alert or console.log is getting printed or not. put console.log also. sometimes alert doesn't show up.

Collectives™ on Stack Overflow

jQuery's ajax() does not work if jQuery is loaded dynamically

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related