0

我正在开发网络应用程序中的删除功能，单击按钮会删除我的数据库中的一行。这非常简单并且有效，但我希望用户能够在提交表单之前先确认删除。

这是现在表单的标记：

echo '<li class="fave-item">';
echo '<div class="tasted-this box-center">';
echo '<form class="delete-fave">';
echo '<input type="hidden" name="user_id" value="'.$faves_result['user_id'].'" />';
echo '<input type="hidden" name="beer_id" value="'.$faves_result['beer_id'].'" />';
echo '<button class="icon delete" data-icon="x" />';
echo '</form>';
echo '</div>';
echo '</li>';

这是 ajax 提交函数：

$('.delete-fave').on('submit', function(){
  $.ajax({  
    type: "POST",  
    url: "deletefave.php",  
    data: $(this).serialize(),  
    success: $.proxy(function(json) {  
      $(this).closest('li.fave-item').remove();
    },this)  
  });
  return false; 
});

这是我希望在提交之前发生的事情：

$('button.delete').click(function(){
  $(this).parent().addClass('delete-fave');
  $(this).addClass('ready');
  return false;    
});

当我对此进行测试时，我从表单中删除了该类以实现以下事件顺序：

  1. 单击“button.delete”将类“delete-fave”添加到表单（使其处于活动状态）
  2. 'button.delete' 得到一个 'ready' 类
  3. 再次单击带有“就绪”类的按钮提交表单。

我一直无法合并这些功能，所以我希望你能帮助我！

4

1 回答 1

0

该$('.delete-fave').on('submit'...函数是在将类添加到button.delete父级之前定义的，因此它不起作用。

要让它工作，只需在添加类之后再次重新定义函数。

JSFiddle 重现您的问题：http: //jsfiddle.net/rowlandrose/XAeCh/5/

JSFiddle 解决您的问题：http: //jsfiddle.net/rowlandrose/XAeCh/4/

于 2013-05-18T21:14:30.150 回答