AJAXコンテンツ用のjQuery .load

Question

ajax経由でロードするイメージに変更を加えたいが、アクセスする必要のある要素がドキュメント上に存在しないので、試してみた。 。読み込まれたコンテンツに何らかの「フラグ」を追加することができます。これを検出して、要素がページ上にある後に以下の.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 ) { 

    } 
}); 
}); 

}）;要素がまだ存在しない場合

`

`

Answer 1

、あなたがバインドする：

ページ構造（RESULTSのDIVは、フォーム送信で動的に追加されます） 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 
    ... 

})