ajaxで非同期取得したHTMLを要素にappendの後に、onclikイベント効かない現象の解消・対策_技術三昧ブログ

ホーム » ブログ » ajaxで非同期取得したHTMLを要素にappendの後に、onclikイベント効かない現象の解消・対策

@2018/09/06


<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="https://www.benri.jp/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

$(function(){
	$.fn.getMiniCalendar();
	
/*	
	$('.Calendar__changeMonth').on('click',function(e) {  
		alert($(this).data('month'));
	});
*/	
	$(document).on("click",".Calendar__changeMonth", function() {
        //alert($(this).data('month'));
        var yyyymm = $(this).data('month');
        $.fn.getMiniCalendar(yyyymm);
    });
	
	
});


$.fn.getMiniCalendar = function (yyyymm) {
    var send_data = {m:yyyymm};
    // WebAPI
	var webApi = "http://localhost/benri/test/calendar/mini_calendar.php";
	$.ajax({
		type: "POST",
		url: webApi,
		dataType: "html",
		data: send_data,
	})
	.done(function(response) {
		if (response.result === "OK") {
			//console.log(response);
		  } else {
		  	//console.log(response);
		  }
		  $('#mini-calendar').empty();
		  $('#mini-calendar').append(response);
		  return false;
		}
	)
	.fail(function(XMLHttpRequest, textStatus, errorThrown) {
		//$('div[data-result=""]').html(XMLHttpRequest.status + ' : ' + errorThrown);
		console.log(XMLHttpRequest.status + ' : ' + errorThrown);
		return false;
	}
	);
};

</script>
</head>
<body>

ajaxで非同期取得したHTMLを要素にappendの後に、onclikイベント効かない現象の解消・対策
<div id="mini-calendar">

</div>
</body>

</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/301.html

閉じる

ajaxで非同期取得したHTMLを要素にappendの後に、onclikイベント効かない現象の解消・対策_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！