Bind a click event to a dynamically created Dialog in jQuery

Question

Original fiddle example

Failed example for dynamically created dialog

I got this script to load AJAX content into a jQuery UI dialog whose class is named .open_dia in the fiddle examples. The problem is that I have the .open_dia dynamically loaded into the page in a (window).bind(“load”, function(){} event , so I want to know how to change this line from

var $link = $(this).one('click', function(){....

to something to the effect of

var $link = $('.area').one('click','.open_dia', function() {

so that I can bind the event to the dynamically created element .open_dia to open the dialog. Any help would be appreciated.

Here's the original code:

$(document).ready(function() {
    var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');

    $('.open_dia').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;
        });
    });
});

Failed Code:

$(document).ready(function(){

    $('button').one('click',function(){
     $(this).next('.area').append('<a class="open_dia" title="this title" href="http://jsfiddle.net/">Click</a>');
});
    var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
        $('.open_dia').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $('.area').one('click','.open_dia', 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;
            });
        });
    });

Example HTML:

<button>Append open_dia</button>
<div class='area'></div>

Answer 1

Hi I have forked your solution and made modification to your javasript as follows:

var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');

    $(document).ready(function () {
        $('button').click(function () {     
            $(this).next('.area').append('<a class="open_dia" title="this title" href="#">Click</a>');        
        });

    $(document).on('click', '.open_dia', function (evt) {
        var dialog = $('<div></div>').append(loading.clone());

        dialog.load($(this).attr('href') + ' #content').dialog({
                title : $(this).attr('title'),
                width : 500,
                height : 300
        });

        dialog.dialog('open');
        return false;

    });       
});

My modified JS fiddle is here: http://jsfiddle.net/91nc1k1t/2/

If you want to load each dialog's content only once, see this update of the forked fiddle: http://jsfiddle.net/91nc1k1t/5/

Answer 2

You can use this:

<button>Append open_dia</button>
<div class='area'><a style="display: none;" class="open_dia"></a></div>

Answer 3

There is no problem if the target DOM element is dynamically generated. For it to work, please ensure that the event handler is registered on container element (parent of the dynamically created element)'s click event. This will fix the issue !