Question

我有一个PHP循环，它创建了一系列具有唯一数据属性的按钮。单击这些按钮时，它们会打开一个模式，该模式收集按钮上数据属性的值，并使用它们预填充表单。可以在这里看到：https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

模态打开，但不显示我试图收集的数据。我也无法让alert();这样的核心功能工作......而且我迷失了。

我尝试过使用jQuery的数据（）和相关的数据属性，但是当他们也没有工作时我坚持使用attr（）。

有人可以帮忙吗？

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
    Add Comment
    </button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
    Add Comment
    </button>

<div id="comment-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title check-comment-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body check-comment-body">
                <label for="clientid" class="control-label">Client ID:</label>
                <input type="text" class="form-control" id="clientid" disabled="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success">Save Comment</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
$(function(){

    // This alert doesn't run for some reason. 
    // console.log doesn't work either, but the modal works...
    alert();
    $('#comment-modal').on('show.bs.modal', function(event) {

        var modal = $(this);
        var button = $(event.relatedTarget); // btn that triggered the modal
        var client = button.attr('data-clientcode');
        var checkid = button.attr('data-checkid');
        var checkname = button.attr('data-checkname');

        modal.find('.modal-title').text('Comment submission for ' + client)
        modal.find('.modal-body .check-comment-body').html(checkname);
        modal.find('.modal-body input').val(checkid);
    )}
});
</script>

Answer 1

您的代码中似乎有错误。试试这个：

＆＃13;

$(function(){

    // This alert doesn't run for some reason. 
    // console.log doesn't work either, but the modal works...
    
    $('#comment-modal').on('show.bs.modal', function(event) {

        var modal = $(this);
        var button = $(event.relatedTarget); // btn that triggered the modal
        var client = button.attr('data-clientcode');
        var checkid = button.attr('data-checkid');
        var checkname = button.attr('data-checkname');

        modal.find('.modal-title').text('Comment submission for ' + client)
        modal.find('.modal-body .check-comment-body').html(checkname);
        modal.find('.modal-body input').val(checkid);
    })
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
    Add Comment
    </button>

<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
    Add Comment
    </button>

<div id="comment-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title check-comment-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body check-comment-body">
                <label for="clientid" class="control-label">Client ID:</label>
                <input type="text" class="form-control" id="clientid" disabled="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success">Save Comment</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Bootstrap模态 - 无法从relatedTarget收集attr？

1 个答案: