Почему эта функция никогда не достигается?

Question

Почему никогда не достигается функция с fadeOut? Каждый раз, когда функция запускается, она обновляет страницу вместо использования AJAX.

<script type="text/javascript">


function deleterow(id){
if (confirm('Are you sure want to delete?')) {
$.post('delete.php', {id: +id, ajax: 'true' },
function(){
$("#row_"+id).fadeOut("slow");
});
}
}

</script>

Вот вывод html по php:

<button onclick="deleterow('.$entry['rowid'].')" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-trash"></span></button>

Answer 1

Трудно сказать наверняка, не видя код / ​​html, который вызывает функцию, но я предполагаю, что это каким-то образом связано с обработчиком onclick.Поэтому, если вы не запретите действие по умолчанию (следуя href тега a), оно обновит страницу.Вам необходимо вернуть false из функции-обработчика или вызвать event.preventDefault() из нее.

Я бы использовал эту разметку вместо этого:

<button 
  value="$entry['rowid']"
  class="fg-delete fg-button fg-button-icon-left ui-state-default ui-corner-all">
  <span class="ui-icon ui-icon-trash"></span>
</button>

Путем кодирования rowid в dom (в данном случаекак value) мы можем получить к нему доступ в наших функциях без необходимости кодировать его в вызове функции и сохранять обработчик ненавязчивым.

// pulling this into a full definition for clarity
// you could of course just use an anon function inside you $.click call
function handleDelete(event){
   event.preventDefault();
   var $this = $(this);
   var rowId = $this.val();
   deleterow(rowId);
   return false;
}


$('button.fg-delete').click(handleDelete);

Демонстрация: http://jsfiddle.net/eBa7v/1/