Question

我在Web应用程序中处理删除功能，单击按钮会删除数据库中的行。这很简单，但它确实有效，但我希望用户能够在提交表单之前先确认删除。

以下是表单的标记，现在是：

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 submit func。：

$('.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;    
});

当我测试这个时，我从表单中删除了类来实现这个事件顺序：

点击'button.delete'将表'delete-fave'添加到表单中（使其处于活动状态）
'button.delete'获得'准备'课程
再次单击“准备好”类的按钮提交表单。

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

Answer 1

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

要使其正常工作，只需在添加课程后再次重新定义该功能。

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

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

再次点击按钮发送表格？

1 个答案: