Why Won't This Modal Display?

Question

Why won't the following code display the modal?

Button:

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

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

I know there's a lot of weird stuff in my modal, which I hope to work on soon. But my issue's very basic, I think. Why doesn't the modal appear when I click the button?! I'm doing this parallel to some previously written code works. Why it doen't work in this context is baffling. Been tearing my hair out on this one for a while. Help me geniuses!

Answer 1

Is your JavaScript at the bottom of your document or the top? If it's at the top, you need to wrap it in $(document).ready(function(){...}) or else delegate the event like so:

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

---

Another possibility: If you have several such buttons, they need to have unique IDs. JavaScript expects IDs to be unique, so your code is only attaching a click event to the first such #display button found in your HTML.

If you're generating them in a loop server-side, it's easier to give them a unique common class:

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

and target that instead:

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

or

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