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 が必要です。#displayJavaScript は ID が一意であることを想定しているため、コードはHTML で最初に見つかったそのようなボタンにのみクリック イベントを関連付けています。

それらをループサーバー側で生成している場合は、それらに一意の共通クラスを与える方が簡単です:

<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 に答える