ajax響應包括圖像，圖像上的onClick事件不起作用jQuery

Question

我對此感到非常瘋狂，我無法在jQuery中創建一個簡單的click()事件。 我真的需要你的幫助。

我有一個將數據發送到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 );