0

我正在尝试提交按钮使用 AJAX 的父 DIV 的 ID。这是标记：

<div id="32"><input id="button" type="button" class="before" onclick="add_fav();" /></div>

这是当前状态的 ajax 脚本：

<script>
function add_fav()
{   
jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}
</script>

这不起作用，所以我用来传递 DIV 的 id 的方法显然是不正确的。也许有人可以让我直截了当？

4

2 回答 2

1

如果使用内联单击处理程序将对单击项的引用传递给您的函数：

onclick="add_fav(this);"

然后：

function add_fav(btn)
{   
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(btn).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}

在 inline 属性this中确实引用了 clicked 元素，但不在您正在调用的函数中（除非您采取措施使用.call()or .apply()）。

但是，我建议使用 jQuery 绑定事件处理程序：

jQuery("input.before").click(function(){
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
});

...然后 jQuery 确保this设置正确，并且您不需要内联 onclick。将上述内容放在 document.ready 处理程序或按钮之后出现的脚本块中（例如，在正文的末尾）。

于 2012-08-05T22:09:02.073 回答
0

将元素作为参数传递给函数，以便您可以在函数中使用它。onclick="add_fav(this);"

<script>
function add_fav(element)
{   
jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(element).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}
</script>

如果您仍然想this在功能中使用，您可以使用function.call()，onclick="add_fav.call(this);"并使用add_fav您拥有的方式。

于 2012-08-05T22:10:26.933 回答