ボタンをクリックするとデータベースの行が削除される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 送信機能があります。
$('.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」は「ready」クラスを取得します
- 「準備完了」クラスのボタンをもう一度クリックすると、フォームが送信されます。
これらの機能をマージできなかったので、助けていただければ幸いです。