Question

I have a div which has no content. the content is dynamically loaded into the div, through jquery load(). This content contains links. I’m using the jquery load all links into functions to launch a dialog, but its not working because the links don’t show in the source. Any workaround to this?

<pre>
        <script type="text/javascript">
        $(document).ready(function() {
            var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

        $('#maindiv a').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $(this).one('click', function() {
                $dialog
                    .load($link.attr('href') + ' #content')
                    .dialog({
                        title: $link.attr('title'),
                        width: 500,
                        height: 300
                    });

                $link.click(function() {
                    $dialog.dialog('open');

                    return false;
                });

                return false;
            });
        });
    });
    </script>
</pre>

Answer 1

You need to use the .live keyword so that you can attach events to generated html.

in jquery 1.7 (i think) .live is now .on so watch out for that one.

$(".Link").live("click", function(){
  //code here
});

or

$("a").live("click", function(){
  //code here
});

You might also want to remove the default behavior of the link when you click on it.

http://api.jquery.com/event.preventDefault/