Question

我有多个div触发模态，我正在传递data-pic-id，以便在点击modal中的某个按钮时采取相应的操作。问题是当我使用on('show.bs.modal', function(e)将数据属性传递给模态并使用var picId = $(e.relatedTarget).data('pic-id');从关联目标获取其值时直到此处，但现在当我传递picId时模态内部有两个按钮对于他们的onclick事件，我得到了意想不到的结果，它与事件之外的picId不同，并代表另一个id。

HTML：

<div class="photo_border" data-pic-id="1" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="2" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="3" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="4" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="5" data-toggle="modal" data-target="#camera_picker">
<div id="camera_picker" class="modal fade" role="dialog">
<div class="modal-dialog">

 <!-- Modal content-->
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">&times;</button>
             <h4 class="modal-title"></h4>
         </div>
         <div class="modal-body">
             <p id="cam_disclaimer"></p>
                 <button type="button" id="camera_btn" class="btn btn-default"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> Camera</button>
                 <button type="button" id="gallery_btn" class="btn btn-default"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Gallery</button>
         </div>
         <div class="modal-footer">
             <button type="button" id="cancel_btn" class="btn btn-default" data-dismiss="modal"></button>
         </div>
     </div>
 </div>

JS

$('#camera_picker').on('show.bs.modal', function(e) {
    var picId = $(e.relatedTarget).data('pic-id');
    var title = "";
    alert("start "+picId);

    switch(picId) {
        case 1:
            title = app.getDic().main_image;
            break;
        case 2:
            title = app.getDic().front_image;
            break; 
        case 3:
            title = app.getDic().side_image;
            break;
        case 4:
            title = app.getDic().back_image;
            break;
        case 5:
            title = app.getDic().interior_image;
            break;
        case 6:
            title = app.getDic().wheel_image;
            break;
        default:
           title ="";                    
    }

    //get data-id attribute of the clicked element

    $(e.currentTarget).find('.modal-title').text(title);

    //populate the textbox

    $(e.currentTarget).on('click', 'button#gallery_btn', function(e) {
        console.log('gallery');
        /**
         * Issue is here
        **/
        alert("currentTarget "+picId);
        $('#camera_picker').modal('hide');
        $('.modal-backdrop').remove();            
    });

    $(e.currentTarget).on('click', 'button#camera_btn', function(e) {
        console.log('camers');
        /**
         * Issue is here
        **/
        alert("currentTarget "+picId);
        $('#camera_picker').modal('hide');
        $('.modal-backdrop').remove();
    });


});

修改从额外的东西清理Js ..

Answer 1

根据Jquery documentation，您需要将picId作为event.data传递。

尝试这种方式：

 $(e.currentTarget).on('click','button#gallery_btn',{'picId':picIdGlobal},function(e){

      alert("currentTarget "+e.data.picId);

    });

模态中的按钮没有从父引导程序获得正确的值

1 个答案: