Question

I am loading a partial view into a main view using ajax but struggling to get the jquery to fire within the partial view.

Basically I am trying to allow a partial view to load that contains a button that allows me to open up a dialog window.

My partial view contains this small piece of js

    <script type="text/javascript">
    $(document).ready(function () {
        alert('ready');
        $('#edit-note').click(function () {
            //$('#dialog').dialog('open');
            alert("alert displayed from jquery");
        });
    }); 

</script>

However it is never fired.

What do I need to do to enable jquery to work from a dynamically loaded partial view?

Answer 1

Your code that starts with $('#edit-note').click(function () {, is run when the document is ready. At that point in time, you have not yet loaded your partial view, so $('#edit-note') is an empty collection.

jQuery allows you to bind events to elements that are not yet on the page, via its live method:

$('#edit-note').live('click', function () {
    alert("alert displayed from jquery");
});