javascript - 如何在模态 Bootstrap 中发送参数？

Question

我的观点是这样的:

@foreach($product->photo_list as $i => $photo)
    <a href="javascript:" class="text-danger 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">
        <button type="button" class="btn btn-danger" id="confirm-delete">
            Delete
        </button>
    </div>
</bs-modal>

我的 JavaScript 是这样的:

$('.delete').click(function(){
    var photo = $(this).data('photo');
    var productId = $(this).data('product_id');
    $('#confirm-delete').data('photo', photo, 'productId', productId); //set the data attribute on the modal button
});

$('#confirm-delete').click(function(){
    var photo = $(this).data('photo');
    var productId = $(this).data('product_id');
    console.log(photo)
    console.log(productId)
    $.ajax({
        ...
    });
});

代码执行时，控制台日志结果为

undefined

如何解决这个问题？

Answer 1

你可以使用这个

<button data-photo="photo" data-photo_id="photo-id" type="button" class="btn btn-danger" id="confirm-delete">
    Delete
</button>

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

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