jQuery load not loading content

Any ideas why this doesn't work?

$('a.uiAjaxModal').click(function (e) {

            e.preventDefault();

            $modalHtml = '<div class="uiModalWrapper"><div class="uiModal"><!--content here--></div></div>';

            $($modalHtml).find('.uiModal').load($(this).attr('href'));

            $('body').append($modalHtml);

        });

<a class="uiAjaxModal" href="/Organisations/New">New</a>

It appends the moda开发者_如何学Gol fine but the content isn't loaded in and I get no errors in the Console!

Also how could I make it so that the modalHtml is ONLY appended to the dom on a click event like I have done in my code BUT make sure that only one instance of it can exist on the screen?

I think the selector is invalid. please try this

$('.uiModalWrapper').find('.uiModal').load($(this).attr('href'));

make the string to a jquery object, because you are using a jquery object in the ajax, but what you append is a string, not a jquery reference:

$('a.uiAjaxModal').click(function (e) {

        e.preventDefault();

        $modalHtml = $('<div class="uiModalWrapper"><div class="uiModal"><!--content here--></div></div>');

        $modalHtml.find('.uiModal').load($(this).attr('href'));

        $('body').append($modalHtml);

    });

<a class="uiAjaxModal" href="/Organisations/New">New</a>

and if you only want it to run once then look at .one() method in jquery.

I ended up using .ajax() instead which works fine and has much better options