javascript - ajax响应包括图像，图像上的onClick事件不起作用jQuery

Question

我对此感到非常疯狂，我无法click()在 jQuery 中创建一个简单的事件。我真的需要你的帮助。

我有将数据发送到 PHP 文件的 ajax，结果将回显为(response)

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

包含在响应中，这是<img src="next.png" id="next" alt="" />

我只是希望next图像可点击并显示某种警报。

以下是我对代码的不同变体。但我仍然无法使按钮工作！

//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

使用.on()

由于元素是动态添加的，因此您不能将事件直接绑定到它们。因此您必须使用事件委托。

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

或更好

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

句法

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