Как правильно сделать подтверждение удаления записи из БД?

Question

[glem1337]

Код который удаляет, а перед удалением уточняет надо ли это:

//Delete product
	$(".delete-btn").one('click', function() {
		var rel = $(this).attr("rel")
		id  = $(this).data('id');
		$(".delete-product").click(function() {
			$("#deleteModal").modal("hide");
			$.ajax({
				type: "POST",
				url: rel,
				data: { id: id},
				dataType: "html",
				cache: false,
				success: function(data) {
					if(data == 'deleted')
					{
						location.reload();
					}
				} 
			});
		});

	});
	//Delete product

Код модального окна Bootstrap:

<!-- Modal -->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">Подтверждение удаления</h4>
					</div>
					<div class="modal-body">
						Вы действительно хотите удалить этот продукт?<br>
						После удаления восстановление будет невозможно! <br>
						Продолжить?
					</div>
					<div class="modal-footer" style="text-align: left;">
						<button type="button" class="btn btn-primary delete-product">Да</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Нет</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

Если просто сразу же удалять, то все отлично работает. Но если, к примеру, нажать удалить, далее появляется окно подтверждения, и не подтвердить, а просто поиграться и покликать по всем удалить и не подтверждать, то когда все таки пользователь решится на удаление, то удаляются все записи, которые были прокликаны. Как я понял, то когда нажимаем удалить, то обработчик срабатывает ровно то количество раз сколько было прокликано, при чем в нем уже храниться правильный id записи. Как уйти от этого?

Answer 1

[glem1337]

Решил задачу таким способом, а именно сбрасыванием обработчика:

$(".delete_review").on('submit', function() {

				var th = $(this);

				$('#deleteModal').modal();

				$(document).off('click', '.delete-review');

				$(document).one('click', '.delete-review', function(e) {
					$.ajax({
						type: "POST",
						url: "/admin/reviews/delete_review",
						data: th.serialize(),
						dataType: "html",
						cache: false
					}).done(function(response) {

						if (response == "deleted") {
							location.reload();
						}

					});
				});

				return false;
			});

Answer 2

[Brother79Mail]

Честно мало информации. Обычно я делаю $('body').on('click','.del-button',function(){...}) гдето в js файле, чтобы инициализировался 1 раз, и тогда все ровно работает, а если вы ставите обработчик при инициализации модального окна, то он можен инициализироваться много раз, тогда надо его тушить через off, иначе действительно обработчик может множиться