ajax response includes image, onClick event on image not working jQuery

Question

im getting really crazy about this, i cant make a simple click() event in jQuery. i really need your help on this.

i have ajax that will send data to a PHP file and the result will echo back as (response)

$.post("get.php?data="+ data, {
  }, function(response){
  $('#load').html(response);

included in the response, is this <img src="next.png" id="next" alt="" />

i simply want the next image to be clickable and display some kind of alert.

below are my different variations on the code. but i still cant make the button work!

//test 1
$(document).ready(function () {
    $('#next').livequery("click", function () {
        alert("test");
    });
});

//test 2
$(document).ready(function () {
    $('#next').on("click", function () {
        alert("test");
    });
});

//test 3
$(document).ready(function () {
    $('img#next').on("click", function () {
        alert("test");
    });
});

//test 4
$(document).ready(function () {
    $('#next').on("click", "img", function () {
        alert("test");
    });
});

//test 5
$(document).ready(function () {
    $('#next').on("click", "img", function (e) {
        e.preventDefault();
        alert("test");
    });
});

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-01 15:58:36Z

2

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).ready(function () {
    $(document).on("click", "#next", function (e) {
        e.preventDefault();
        alert("test");
    });
});

or better

$(document).ready(function () {
    $("#load").on("click", "#next", function (e) {
        e.preventDefault();
        alert("test");
    });
});

Syntax

$( elements ).on( events, selector, data, handler );

answered Nov 1, 2013 at 15:58

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

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

1 Comment

bobbyjones Over a year ago

thank you! never knew about event delegation. thanks for saving me from headache.

Collectives™ on Stack Overflow

ajax response includes image, onClick event on image not working jQuery

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