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

})

用于AJAX内容的jQuery .load

2 个答案: