Question

我正在为一个简单的论坛编写代码，列出了主题，并且可以通过单击链接（图像）来动态添加新主题，其中表单将添加到空div中（通过.html（）），如何从这个特定的表单中捕获表单提交事件？

以下代码：

<li class="cat_root_li">New Subject<br />
  <span class="disc_span">Some EExplanation</span>
  <ul>
    <li>No Topics currently
    </li>
    <li id="3">Add a new topic <a href="#" class='new_topic_li' checked_link="0"><img src="images/list-add-2.png" height="28px" style='position:absolute;margin-top:-2px;' /></a>
      <div id="new_topic_div"></div>
    </li>
    <li style="list-style: none">
      <br />
    </li>
  </ul>
</li>

我的脚本如下：

<script>
    $(document).ready(function(){
        $('div#new_topic_div').hide();
        var form = "<form id=add_new_topic_form action='' method=POST>\n <table class=add_new_topic_form_table border=0>\n <tr><td colspan=2><?=tjcg_add_topic;?></td></tr><tr><td valign=top><?=tjcg_form_post_title;?></td><td valign=top><input type=text name=new_topic_title id=new_topic_title><td></tr>\n <tr><td valign=top><?=tjcg_form_post_subject;?></td><td valign=top><textarea name=new_topic_text id=new_topic_text class=widgEditor rows='5' cols='45'></textarea></td></tr><tr><td class=add_topic_result></td><td><input type=submit class=submit_btn value='<?=tjcg_form_submit;?>' /> <a class=test_href href=#>link</a></td></tr>\n <table>\n </form>";
        $('a.new_topic_li').on("click",function(e){
        e.preventDefault();
        var parent= $(this).closest('li')
        var checked = $(this).attr('checked_link');
        if (checked == 0)
        {
        parent.find('div#new_topic_div').html(form).show(200);
        $(this).attr('checked_link',"1");
        }
        else{
        parent.find('div#new_topic_div').html('').hide(200);
        $(this).attr('checked_link',"0");
        }
        });
    });
</script>

有没有办法从这段代码中捕获表单提交事件？

Answer 1

是的，使用on()

$(document).on('submit', '#add_new_topic_form', function(){
  alert("I've been submitted");
});

您可以使用表单中最近的父级替换document中的$(document)。

Answer 2

由于动态创建，您必须执行以下操作：

 $('div#new_topic_div').on('submit', 'form#add_new_topic_form', function() {
      console.log('submitting');
 });

jQuery将.html（）注入的表单提交到div中

2 个答案: