Question

我有以下HTML：

<form method='post' name='form".$post->ID."' >
   <input type='submit' name='bid".$post->ID."' value='Licitar' class='bidvalue'>
</form>

我在PHP循环中有以下jQuery 来处理提交事件：

<script> jQuery('input[type=submit]').click(function(e) { e.preventDefault(); jQuery.ajax({ type: 'POST', url: ajaxurl, data: 'action=newbid&id=".$post->ID."', success: function(msg){ jQuery('#vehicle-value-box".$post->ID."').html(msg+',00€'); } }); </script>

当用户点击提交按钮时，我想更新当前出价的值，并使用AJAX更新带有该值的框。我在functions.php中使用：

function newbid_ajax() { $post_id = $_POST['id']; $mybid = get_post_meta($post_id, 'start_price', true); $mybid = $mybid + 100; update_post_meta($post_id,'start_price',$mybid); die($mybid); }

但是，我无法单独处理表单提交事件。我有3次测试拍卖。当我点击拍卖＃1时，它会更新拍卖＃2的价值;当我点击拍卖＃2时，它会更新拍卖＃3;当我点击拍卖＃3时，没有更新任何内容和e.preventDefault（）;不起作用（页面重新加载）。

您可以在此location查看该网站。提交按钮的文字为“LICITAR”。

我知道有关于此问题的其他帖子，但不知何故我无法设法使他们的解决方案适应我的问题。

提前致谢。

Answer 1

查看提供的URL的来源，每个表单都有一个jQuery单击处理程序：

jQuery('input[type=submit]')

这种方法可能会导致每个表单提交按钮有多个绑定，具体取决于代码的结构。

解决方案是在$( document ).ready(...)内只声明一个点击处理程序。下面的按钮和功能已被修改为适用于此场景（未测试）：

<input type='submit' name='".$post->ID."' value='Licitar' class='bidvalue'>

下面的函数在任何循环之外只声明一次，通常在文档的<head></head>部分。

$(document).ready(function()
{
    jQuery('.bidvalue').click(function(e) {
        e.preventDefault();
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: 'action=newbid&id='+e.target.name,
            success: function(msg){
                jQuery('#vehicle-value-box'+e.target.name).html(msg+',00€');
            }
    });
});

Answer 2

如果我正确认识你，你有多种形式和需要有自己的ajax功能吗？

比你必须给提交一个id：

<form method='post' name='form".$post->ID."' >
   <input type='submit' name='bid".$post->ID."' id="submit-1" value='Licitar' class='bidvalue'>
</form>

新js：

<script>
$('form').submit(function( e ) {
    e.preventDefault();
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: 'action=newbid&id=".$post->ID."',
        success: function(msg){
            jQuery('#vehicle-value-box".$post->ID."').html(msg+',00€');
        }
});
</script>

编辑试试

如何在同一页面上处理多个表单

2 个答案: