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

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

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规范 P元素只能包含内联元素; div - 目标div - 不是内联元素。

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: