javascript - 无法为(稍后)javascript 生成的元素传播事件监听器(提交表单)

Question

我有 html 代码，例如 -

<div class = "setup_eda_class" id = "Setup_eda">
<p>
<a> <span id="calendar_eda_form_top_x"> x </span> </a>
<br> </br>
<div id="insert_calendar_eda_form"> </div>
</p>
</div>

最初插入 div 'insert_calendar_eda_form'。

Javascript代码

    calendar_eda_add_form = function (clicked_id, arraylength){
    htmlstr = "";
	htmlstr += '<a> Add Events for - </a>' ;
	htmlstr += '<form id="calendar_eda_add_form" action="/setupaddcalendarevent" method="POST">'
	htmlstr += '<label for="start_date">Start Date</label>'
	htmlstr += '<input type="text" name="start_date" />'
	htmlstr += '<label for="end_date">End Date</label>'
	htmlstr += '<input type="text" name="end_date" />'
	htmlstr += '<br> </br>'
	htmlstr += '<input type="submit" value="Add Event" />'
	htmlstr += '</form>'
	$("#insert_calendar_eda_form").html(htmlstr);

表单“calendar_eda_add_form”html 是由 Javascript 动态创建的。

事件监听器的 HTML 代码

    <script type="text/javascript">
	$(document).ready(function(){
	$('#insert_calendar_eda_form').on('submit', 'calendar_eda_add_form', function(event){
	alert ('clicked add event');
	event.preventDefault();
	somefunction();
	});
	});

Calendar_eda_add_form是由JS动态生成的。我正在尝试传播“提交”事件，但似乎不起作用。你能帮忙吗？

Answer 1

.on() 内的选择器上缺少哈希标签

$(document).ready(function(){
    $('#insert_calendar_eda_form').on('submit', '#calendar_eda_add_form', function(event){
    alert ('clicked add event');
    event.preventDefault();
    somefunction();
    });
});

这是一个 fiddle ，显示它正在工作 http://jsfiddle.net/ja3kaa4b/ - 您在浏览器中看到任何控制台错误吗？