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

Not able to propagate event listener (submit for form) for element generated by(later) javascript

本文关键字：传播 元素 侦听器 表单 提交 事件 javascript      更新时间：2023-09-26

我有像这样的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"。

脚本代码

    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 动态生成。我正在尝试传播"提交"事件，但似乎不起作用。你能帮忙吗？

缺少 .on（） 内选择器上的哈希标签

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

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

您可能遇到重复 ID 的影响。在函数中calendar_eda_add_form将窗体的 ID 更改为类，并改用以下代码：

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

更新

根据问题下的评论，上述情况不太可能，因为表单仅添加到 DOM 一次。但是，正在使用的 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>

根据 HTML 规范，P 元素只能包含内联元素;div - 目标div - 不是内联元素。

  • 为什么

    标签不能包含

    标签？
  • http://www.w3.org/TR/html4/sgml/dtd.html

如果我理解你的问题，这应该有效：

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>'
    
    return htmlstr;
   // in your code I dont see where you ever do anything with `htmlstr `. 
   // Since you made `calendar_eda_add_form` a function, I'm assuming you meant to return `htmlstr`
   // and insert the created html into your `insert_calendar_eda_form` div
   // im assuming you have a reason for `clicked_id, arraylength` here but not sure what they are for
 }   

$(document).ready(function(){
   //change this line to add the `#` and bind to `document`
	$(document).on('submit','#calendar_eda_add_form',function(event){
	   event.preventDefault();
	   somefunction();
	});
  
  //put here to simulate adding form later
  $('#create').click(function(){
      
       //insert the created html into your `insert_calendar_eda_form` div
       $('#insert_calendar_eda_form').html(calendar_eda_add_form);
    });
  
});

function somefunction(){
  
  alert ('clicked add event');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="create" value="create form"/>
<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>

相关文章：