jQuery .load用於AJAX內容

Question

我想對通過ajax加載的圖像進行更改，但是我需要訪問的元素未在准備就緒的文檔中顯示，因此我嘗試了.load，但這似乎並沒有觸發。 我可以在加載的內容上添加某種“標志”，然后將其檢測出來，並在頁面上的元素之后使下面的.load函數啟動嗎？

jQuery(document).ready(function($){

$('.qmn_results_page').load(function(event) {
    var canvas = document.getElementById("jma-chart");console.log('loaded');
    var img = document.getElementById("source");
    img.src = 'http://my-domain.com/wp-content/uploads/2017/09/chart-headings.jpg';
    img.height = 1026;
    img.width = 1000;

    //var img = document.getElementById("source");
    var ctx = canvas.getContext("2d");

    var str = $('#jma-chart').data('points');
    var quiz_id = $('#jma-chart').data('id');
    var $points = str.split('|');


    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    for (index = 0; index < $points.length; ++index) {
        $point = $points[index].split(',');
        if (!index) {
            ctx.moveTo($point[0], $point[1]);
        } else {
            ctx.lineTo($point[0], $point[1]);
        }

    }
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.stroke();
    for (index = 0; index < $points.length; ++index) {
        $point = $points[index].split(',');
        ctx.beginPath();
        ctx.arc($point[0], $point[1], 4, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'red';
        ctx.fill();
    }

    var dataURL = canvas.toDataURL();
$.ajax({
    type: 'post',
    url: chartscript.charturl,
    data: {
        action: 'jma_save_image',
        imgBase64: dataURL,
        quiz_id: quiz_id

    },
    success: function( $html  ) {

    }
});
});

}）;

頁面結構（將結果DIV動態添加到表單提交中）：

`

`

Answer 1

如果該元素尚不存在，並且您想將其與事件綁定，請嘗試使用jquery .on（）方法。 這會將事件附加到特定元素。 您可以參考此文檔。

http://api.jquery.com/on/

Answer 2

代替

$('.qmn_results_page').load(function(event) {
   ...
});

嘗試這個

$(document).on('load', '.qmn_results_page', function(){
  ....
  blah blah blah
  ...

})