【问题标题】:Javascript onclick function not working laravel bladeJavascript onclick函数不起作用laravel刀片
【发布时间】:2026-01-19 00:55:01
【问题描述】:

使用 sweetalert2 开发删除前需要确认的删除功能。 这是我尝试过的代码

<button class="btn btn-danger waves-effect" type="button" onclick="book({{ $book->id }})">delete</button>
<form id="delete-form-{{ $book->id }}" action="{{ url('/library/books/', ['id' => $book->id]) }}" method="POST">
    {!! method_field('delete') !!}
    {!! csrf_field() !!}
</form>

这是我在主刀片中推送的 javascript

<script type="text/javascript">
function book(id) {
    swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        confirmButtonClass: 'btn btn-success',
        cancelButtonClass: 'btn btn-danger',
        buttonsStyling: false,
        reverseButtons: true
    }).then((result) => {
        if (result.value) {
            event.preventDefault();
            document.getElementById('delete-form-'+id).submit();
        } else if (
            // Read more about handling dismissals
            result.dismiss === swal.DismissReason.cancel
        ) {
            swal(
                'Cancelled',
                'Your data is safe :)',
                'error'
            )
        }
    })
}

在主刀片中使用堆栈

@stack('customjs')

单击删除按钮时出现错误。错误是

books:4 Uncaught ReferenceError: book is not defined
at HTMLButtonElement.onclick (books:4)

我该如何解决这个问题并在删除项目之前显示甜蜜警报?

【问题讨论】:

  • 看到页面源码中的js函数了吗?
  • 是的,它在页面源代码中显示
  • 我认为您应该提供更多代码或将整个页面源代码放在这里
  • 我应该分享哪部分代码?
  • 我认为整个源代码(来自浏览器)已经足够好了

标签: javascript jquery laravel sweetalert2


【解决方案1】:

在底部或页眉的主刀片中

@stack('customjs')

在你的刀片中

@push('customjs')
<script type="text/javascript">
    function book()
    {
        //enter code here
    }
</script>
@endpush

你的按钮

<button class="btn btn-danger waves-effect" type="button" onclick="book({{ $book->id }})">delete</button>

如果你使用 laravel,你可以适当地使用 jquery,这样会更容易。

你的按钮

<button class="btn btn-danger waves-effect clickHandleButton" type="button">delete</button>
<form action="{{ url('/library/books/', ['id' => $book->id]) }}" method="POST">
    {!! method_field('delete') !!}
    {!! csrf_field() !!}
</form>

你的javascript

$(document).on('click', '.clickHandleButton', (e) => { //replaces function book()
   $(e.currentTarget).next('form').submit();
   //find the form next to the clicked button and submit the form.
});

【讨论】:

    最近更新 更多