SW정리: ajax jquery 동적으로 생성된 버튼 클릭 방법(how to click dynamically created button)

ajax를 이용하여 동적으로 생성되는 버튼을 누를때 동작이 안되는 경우가 있습니다. 해당경우에 해결하는 방법입니다.

문제가 있는 예제를 살펴 보도록 하겠습니다.

아래는 python flask 코드 입니다.

from flask import Flask
from flask import request
from flask import render_template
from flask import jsonify

app = Flask(__name__)

@app.route("/")
def index():
	return render_template('button1.html')

@app.route("/ajax_page", methods=['POST'])
def ajax_page():
	data = request.get_json()
	print(data)
	rdata = {}
	rdata['return']='<input type="text" id="txt2" name="inputdata"></input><button id="btn2">real submit</button>'
	print(rdata)
	return jsonify(rdata)

@app.route("/ajax_page2", methods=['POST'])
def ajax_page2():
	data = request.get_json()
	print(data)
	rdata = {}
	rdata['return']="</b>Hello</b>"
	print(rdata)
	return jsonify(rdata)
	
if __name__ == "__main__":
	app.run(port=8080, debug=True)

button1.html 파일 입니다.

<!--https://api.jquery.com/click/-->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>flask demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input type="text" id="txt1" name="inputdata"></input>
<button id="btn1">submit</button>

<div id="result1"></div>
<div id="result2"></div>
</p>

<script>
$( "#btn1" ).click(function() {
	var txt1_v = $('#txt1').val();
	var postdata = {
		'inputdata':txt1_v
	}
	<!--alert( "Handler for .click() called." );-->
	$.ajax({
		type: 'POST',
		url: '{{url_for("ajax_page")}}',
		data: JSON.stringify(postdata),
		dataType : 'JSON',
		contentType: "application/json",
		success: function(data){
			$("#result1").html(data['return']);
		},
		error: function(request, status, error){
			alert('ajax error:['+status+']['+error+']')
		}
	})
});
$( "#btn2" ).click(function() {
	var txt1_v = $('#txt2').val();
	var postdata = {
		'inputdata':txt1_v
	}
	<!--alert( "Handler for .click() called." );-->
	$.ajax({
		type: 'POST',
		url: '{{url_for("ajax_page2")}}',
		data: JSON.stringify(postdata),
		dataType : 'JSON',
		contentType: "application/json",
		success: function(data){
			$("#result2").html(data['return']);
		},
		error: function(request, status, error){
			alert('ajax error:['+status+']['+error+']')
		}
	})
});

</script>
 
</body>
</html>

동작 설명

submit 버튼이 btn1로 해당 버튼을 누르면 ajax_page코드에 의하여

'<input type="text" id="txt2" name="inputdata"></input><button id="btn2">real submit</button>'

HTML 코드가 전달되고 이것은 real submit이란 버튼이 화면에 출력되게 됩니다.

이때 real submit 버튼의 id가 btn2이므로 ajax_page2 페이지로의 호출이 이루어져야 하나 동작 되지 않는 현상이 발생합니다.

이러한 현상을 해결하는 방법은 아래코드를 global click 이벤트를 받을 수 있도록 수정합니다.

$( "#btn2" ).click(function() {

 전체 코드는 아래를 살펴보시기 바랍니다.

python 코드는 render_template('button2.html') 이부분만 제외하고 같습니다.

from flask import Flask
from flask import request
from flask import render_template
from flask import jsonify

app = Flask(__name__)

@app.route("/")
def index():
	return render_template('button2.html')

@app.route("/ajax_page", methods=['POST'])
def ajax_page():
	data = request.get_json()
	print(data)
	rdata = {}
	rdata['return']='<input type="text" id="txt2" name="inputdata"></input><button id="btn2">real submit</button>'
	print(rdata)
	return jsonify(rdata)

@app.route("/ajax_page2", methods=['POST'])
def ajax_page2():
	data = request.get_json()
	print(data)
	rdata = {}
	rdata['return']="</b>Hello</b>"
	print(rdata)
	return jsonify(rdata)
	
if __name__ == "__main__":
	app.run(port=8080, debug=True)

다음은 html 코드입니다

다음과 같은 형태로 변경되었습니다.

$(document).on("click", "#btn2", function(){

<!--https://api.jquery.com/click/-->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>flask demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input type="text" id="txt1" name="inputdata"></input>
<button id="btn1">submit</button>

<div id="result1"></div>
<div id="result2"></div>
</p>

<script>
$( "#btn1" ).click(function() {
	var txt1_v = $('#txt1').val();
	var postdata = {
		'inputdata':txt1_v
	}
	<!--alert( "Handler for .click() called." );-->
	$.ajax({
		type: 'POST',
		url: '{{url_for("ajax_page")}}',
		data: JSON.stringify(postdata),
		dataType : 'JSON',
		contentType: "application/json",
		success: function(data){
			$("#result1").html(data['return']);
		},
		error: function(request, status, error){
			alert('ajax error:['+status+']['+error+']')
		}
	})
});
$(document).on("click", "#btn2", function(){
	var txt1_v = $('#txt2').val();
	var postdata = {
		'inputdata':txt1_v
	}
	<!--alert( "Handler for .click() called." );-->
	$.ajax({
		type: 'POST',
		url: '{{url_for("ajax_page2")}}',
		data: JSON.stringify(postdata),
		dataType : 'JSON',
		contentType: "application/json",
		success: function(data){
			$("#result2").html(data['return']);
		},
		error: function(request, status, error){
			alert('ajax error:['+status+']['+error+']')
		}
	})
});

</script>
 
</body>
</html>

실행화면입니다.

SW정리

2022년 5월 28일 토요일

ajax jquery 동적으로 생성된 버튼 클릭 방법(how to click dynamically created button)

댓글 없음:

댓글 쓰기