$(this).dialog is not a function

问题

...or Why $(this).dialog() fails in Firefox when using dynamic HTML?

I have a a click event that opens a jQuery modal dialog box on a web page, and it is working fine in Chrome and IE, but not in Firefox.

Here is the pertinent code:

var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
var dialogDiv = $(document.createElement('div')).attr("id", dialogId);

dialogDiv.load(this.href, function () {
    var dialog = $(this).dialog({ autoOpen: false });
    ...
});

In Firefox 11, $(this).dialog({ autoOpen: false }) fails with the following error message:

$(this).dialog is not a function

But in IE 9 an Chrome 17 everything is working fine. Any clue why that is?

UPDATE:

Here is my document.ready function where the code above was. I removed it to simplify things. ALERT A is occuring before ALERT B. ALERT A says [object Object]. ALERT B occurs when I click on a link and it says 'undefined'.

$(function () {

    alert($.ui);    // ALERT A

    // Wire up the click event of any dialog links
    $('.dialogLink').live('click', function () {
        alert($.ui);    // ALERT B
        return false;
    });
});

UPDATE 2:

Now that I pin pointed where the problem was coming from I rephrased my question and posted the minimal code to reproduce the original problem here: Why is FF on OS X losing jQuery-UI in click event handler?

回答1:

You've got a bit of a syntax/chaining issue if I'm not mistaken:

var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
//var dialogDiv = $(document.createElement('div')).attr("id", dialogId);
//dialogDiv equals the attribute 'id'
//try and console.log(dialogDiv) right here. what I think you want is:

var dialogDiv = $("<div />");
dialogDiv.attr("id", dialogId).load(this.href, function () {
    var dialog = $(this).dialog({ autoOpen: false });
    ...
});

I also don't think this is the correct way to initialize what you're trying to do... can you describe what's going on, on your page?

you may think about doing something like this:

var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000);
//Build some HTML here in the dialog div, or in a string.
theHTML = $('#'+dialogId).html() || "<p>This is a string of HTML</p>";
$('body').on('click', ".button" function () {
    console.log($.ui);
    $.dialog({autoOpen:true, html: theHTML})
});

回答2:

The problem was with a Firefox Add-On. I started Firefox in safe mode, and now everything is working fine. I tried to identify which Add-On caused the problem, and I restarted Firefox with various Add-Ons turned on or off, but I can't seem to be able to reproduce the problem now.

来源：https://stackoverflow.com/questions/9883486/this-dialog-is-not-a-function