弹出jQuery对话框

Question

hey frenz I have a problem with the jquery-ui dialog box. The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless i refresh the page or save any data in the dialog box.

Code i used is:

<script type="text/javascript"> 

    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        close: function () {
                            $(this).remove();
                        },
                        modal: true
                    })
                    .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

Answer 1

I was able to get it to work by injecting another div with an hourglass/spinning-wheel "Please Wait" loading image. (I'm using jquery-1.7.1)

Try replacing this line:

$("<div></div>")

With this:

$("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>")

This is my working code (exactly as the original post, except for the one line):

// these are for the popup dialogs
// need to use live instead of click because object doesnt exist on ready and will give an objectexpected
$(".openDialog, .editDialog").live("click", function(e) {
    e.preventDefault();

    // this div is duplicate of 'loading' div below
    $("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>")
        .addClass("dialog")
        .attr("id", $(this).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            // NOTE: This is where the size of the popup window is set
            width: 800,
            position: 'top',
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove(); },
            modal: true
        })
        .load(this.href);
});

Answer 2

1. What @MattBradley said.
2. In this line, .attr("id", $(this).attr("data-dialog-id")) , you'r trying to grab the new <div> 's data-dialog-id attribute an assigning the new <div> 's an id attribute. I'm pretty sure you meant to assign the link's data-dialog-id attribute to the new <div> .
3. close: function() { $(this).remove(); } close: function() { $(this).remove(); } is redundant. Unless you meant "remove the link", not the dialog itself, in which case you would use link instead of this (see fiddle ).
4. "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()."
   Taken from jQuery's live() documentation.

---

$('body').on('click', '.openDialog', function (e) {
    e.preventDefault();

    var link = $(this);

    $("<div></div>")
        .addClass("dialog")
        .attr("id", $(link).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            modal: true
        })
        .load($(link).attr('href'),  {
            html: "<p>Text echoed back to request</p>"
        });
});

$('body').on("click", '.close', function (e) {
    e.preventDefault();
    $(this).closest(".dialog").dialog("close");
});

Demo here: http://jsfiddle.net/Ag6wj/