Question

为什么以下代码不会显示模态？

按钮：

<td><button type="button" id="display" class="btn btn-warning btn-small">Yes &raquo;</button>   </td>

使用Javascript：

<script type="text/javascript">

$('#display').click(function(e) 
{
        var displaydatasharingModal = $('#displaydatasharingModal')
        var emails = <?php echo json_encode($emails) ?>;

        //var current_id = $(this).data('id');
        //$(".modal-body #current_id").val(current_id);
        console.log(emails);

        alert("yes!");

    // function to get the options  
    function getPropsAsString(emails) { 

            var props = [];

            for (prop in emails) {
                    var val = emails[prop];

                    // Filter out blank at beginning and "Add New"
                    //if (val === " " || val === "Add New")
                    //    continue; // skip it

                    props.push(prop);
            }
            // Sort them (what the hell)
            props.sort(); 

            return props.join(", ");
    }

    $('#modal-body span2').html(getPropsAsString(emails));                    

    displaydatasharingModal.modal('show');
}
</script>

模态：

<!-- modal (Display Data Sharing) -->
    <div class="modal small hide fade" id="displaydatasharingModal" tabindex="-1" role="dialog" aria-labelledby="displaydatasharingModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="displaydatasharingModalLabel">Data shared with:</h3>
            </div>
            <div class="modal-body">  
                <p> Current access emails are: <p><span2></span2></p></p> 
            <p>some content</p>
            <input type="text" name="current_id" id="current_id" value=""/>            

        </div>
        <div class="modal-footer">
    </div>
</div>

我知道我的模态中存在很多奇怪的东西，我希望很快就能解决这个问题。但我认为我的问题非常基础。单击按钮时为什么不显示模态？！我和以前编写的一些代码并行工作。为什么它在这种背景下工作是令人困惑的。在这一段时间里，我的头发一直在撕裂。帮帮我天才！

Answer 1

您的JavaScript是在文档底部还是顶部？如果它位于顶部，您需要将其包装在$(document).ready(function(){...})中，或者像这样委托事件：

$(document).on('click', '#display', function(e) {

另一种可能性：如果你有几个这样的按钮，他们需要有唯一的ID。 JavaScript期望ID是唯一的，因此您的代码只会将点击事件附加到HTML中的第一个此类#display按钮。

如果您在循环服务器端生成它们，则更容易为它们提供唯一的公共类：

<td><button type="button" class="btn-display btn btn-warning btn-small">Yes &raquo;</button></td>

并将其作为目标：

$('.btn-display').click(function(e) {

或

$(document).on('click', '.btn-display', function(e) {

为什么这个模态显示器不会？

1 个答案: