ajax响应包括图像，图像上的onClick事件不起作用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");
    });
});

Answer 1

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 );