Question

我有一组HTML表单链接，我点击后提交的ID为“ajaxForm”

    for ($year = 2008; $year <= intval(date('Y')); $year++) {
    if ($year == $currentYear)
        continue;
    echo '<div style="float:right;padding-right:20px;"><form name="year' . $year . 'Form1" id= "ajaxForm" action="/managementDashboard#visibleTab-5" method="post"><input name="getRecordsFor" type="hidden" value="' . $year . '"><a id="buttonRed" href="javascript:document.year' . $year . 'Form1.submit();">' . $year . '</a></form></div>' . chr(10);
}

然而，我使用jQuery来发布数据，而不是默认提交：

        jQuery("form#ajaxForm").click(function(event) {

        /* stop form from submitting normally */
        event.preventDefault(); 

        /* Send the data using post and put the results in a div */
        jQuery.post( '/ajaxFunctions?mgmtDbrdPge=5', jQuery("#ajaxForm").serialize(),
        function( data ) {
            jQuery( "#visibleTab-5" ).empty().append( data );

        }
    );
    });

问题是它提交了所有表单而不是我单击的单个表单。有没有办法可以防止这种情况而不必为每个单独的表单编写jQuery链接？

更新 - 我接受了其中一个答案，因为他的方法合法，但我意识到我的问题是什么。而不是jQuery（“＃ajaxForm”）。serialize（），我应该把它写成jQuery（this）.serialize（），只调用用click提交的数据而不是所有带有id的表单。

Answer 1

您似乎拥有多个具有相同ID ajaxForm的表单。确保它是唯一的

如果您知道页面中Ajax表单的ID，那么您可以这样做

jQuery("form#ajaxForm ,form#myForm , form#myFormThird ").click(function(event) {

这将确保多个元素附加到同一个事件处理程序..

更新代码 如果您不知道id，则可以使用for循环进行迭代并附加事件..

$('form').each(function() {

    $(this).click(function(event) {

       // Your Function
    }
});

另外请确保使用.on（）附加事件..而不是仅仅点击以便委派事件..

jQuery("form#ajaxForm").on('click',function(event) {

jQuery阻止所有表单一次提交

1 个答案: