如何解决“XMLHttpRequest 无法加载 javascript”？

Question

我的看法是这样的：

@foreach($product->photo_list as $i => $photo)
    <a href="javascript:" class="text-danger confirm-delete"
       data-toggle="modal"
       data-target="#modal-delete-image"
       data-photo="{{ json_encode($photo) }}" 
       data-product_id="{{ $product->id }}"
    >
        <span class="fa fa-trash"></span>
    </a>
@endforeach

我的模态是这样的：

<bs-modal id="modal-delete-image" v-cloak>
    <h4 slot="title" class="modal-title">...</h4>
    <div slot="body" class="modal-body">
       ...
    </div>
    <div slot="footer" class="modal-footer">
        ...
    </div>
</bs-modal>

我的 javascript 是这样的：

$(document).on("click", ".confirm-delete", function () {
    var photo = $(this).data('photo');
    var product_id = $(this).data('product_id');
    console.log(photo)
    console.log(product_id)
});

我把js放到全局js中

当执行代码时，它可以工作

console.log 成功显示结果。是真的

但是在chrome浏览器中，存在这样的错误：

XMLHttpRequest 无法加载 javascript:。跨源请求仅 支持协议方案：http、data、chrome、chrome-extension、 https。

如果我在firefox浏览器上检查，没有错误

为什么我用chrome浏览器会报错？

我该如何解决？

Answer 1

 $(document).on("click", ".confirm-delete", function (e) { 
    e.preventDefault();
    var photo = $(this).data('photo'); 
    var product_id = $(this).data('product_id');
     console.log(photo);
     console.log(product_id);
 });