jQuery+Edge Animate: Error only when called from click event: Object [object Object] has no method 'foundation'

Question

Using Zurb Foundation and jQuery with Edge Animate I get this error:

Uncaught TypeError: Object [object Object] has no method 'foundation'

....only when calling the foundation function from within an event handler. From outside the event handler, it works fine.

<div id="myModal" class="reveal-modal">
    <h2>Title</h2>
    <p class="lead">Description</p>
    <a class="close-reveal-modal">&#215;</a>
</div>
<a href="#" id="myButton" class="button">Click Me</a>

<script>
    $(document).foundation();

    // This works as expected
    $('#myModal').foundation('reveal', 'open');

    $("#myButton").click(function() {

        // This generates the error:
        // Uncaught TypeError: Object [object Object] has no method 'foundation'

        $('#myModal').foundation('reveal', 'open');

        return false;
    });


</script>

How can I fix this? The error only occurs if the Edge Animate content is there. Once removed it works as expected.

Answer 1

I hadn't realized that Edge loads in a version of jQuery. Using jQuery's noConflict() fixed the problem:

<script>
    $(document).foundation();

    $.noConflict();
    jQuery(document).ready(function($) {
        // Code that uses jQuery's $ can follow here.

        // This works as expected
        $('#myModal').foundation('reveal', 'open');

        $("#myButton").click(function() {
            // This generates the error:
            //Uncaught TypeError: Object [object Object] has no method 'foundation'

            $('#myModal').foundation('reveal', 'open');
            return false;
        })

    });
</script>