0

为什么下面的代码不显示模态？

按钮：

<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>

我知道我的模态中有很多奇怪的东西，我希望很快就能解决。但我认为我的问题非常基本。为什么单击按钮时没有出现模态框？！我这样做与一些以前编写的代码作品平行。为什么它在这种情况下不起作用令人费解。有一段时间我一直在扯这个头发。帮助我的天才！

4

1 回答 1

1

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

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

另一种可能性：如果您有多个这样的按钮，它们需要有唯一的 ID。JavaScript 要求 ID 是唯一的，因此您的代码只是将点击事件附加到#displayHTML 中的第一个此类按钮。

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

<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) {
于 2013-11-12T18:32:08.743 回答