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

Question

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

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();
    });
});

Answer 2

您可能正在经历重复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规范，div P元素只能包含内联元素；-目标div-不是内联元素。

• Why tag can't contain tag inside it?
• http://www.w3.org/TR/html4/sgml/dtd.html

Answer 3

如果我理解你的问题，这应该是可行的：

​

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>

​