为什么ajax会重新加载页面

Question

我有一个 ajax + jquery 脚本，当我执行它时（单击按钮）它会重新加载页面。

脚本

jQuery(document).ready(function($) {
$(document).on('click', '.image-remove-btn', function (e){
    var img = $(this).closest('.thumbs');
    var id = img.attr('data-id');
  
    $.ajax({
        url: admin_url('admin-ajax.php'),
        type: 'POST',
        data: {deletedId : id},
        success: function( data ) {
            img.remove();
        }
    });
});
});

应删除的元素的 HTML：

<div class="thumbs ui-droppable">
                <div class="inner ui-draggable ui-draggable-handle" data-thumb="0">
                    <img data-id="32949" src="https://badzingerauto.com/wp-content/uploads/2021/05/NISSAN__QASHQAI__1-5_dCi_106_Acenta__inc-__inc-__2009__BC501CF-e01-350x205.jpg">
                    <div class="inner-hover">
                       <button class="image-remove-btn butterbean-remove-image"> <!-- <i class="fa fa-arrows"></i> Font Awesome fontawesome.com -->
                    </div>
                </div>
            </div>

Answer 1

我认为@Charlieft 是正确的，您可以按如下方式更改代码以防止重新加载

jQuery(document).ready(function($) {
  $(document).on('click', '.image-remove-btn', function (e){
    e.preventDefault();
    var img = $(this).closest('.thumbs');
    var id = img.attr('data-id');
  
    $.ajax({
        url: admin_url('admin-ajax.php'),
        type: 'POST',
        data: {deletedId : id},
        success: function( data ) {
            img.remove();
        }
    });
  });
});