$（this）.dialog不是一个函数 [英] $(this).dialog is not a function

问题描述

使用动态HTML时，为什么 $（this）.dialog（） p>我有一个点击事件，在网页上打开一个jQuery模式对话框，它在Chrome和IE浏览器中工作正常，但不是在Firefox中。

是相关的代码：

$ $ p $ $ 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}）;
...
}）;

在Firefox 11中， $（this）.dialog（{autoOpen：false }）会失败，并显示以下错误消息：

lock $ $ $ $这个.dialog不是一个函数但是在IE 9中，Chrome 17的一切工作正常。任何线索为什么这是什么？

更新：

这是我的 document.ready 函数，其中上面的代码是。我删除它来简化的事情。 ALERT A在ALERT B之前发生。ALERT A表示 [object Object] 。 ALERT B发生在我点击一个链接时，它显示'undefined'。

  $（$。
 
 
 
 
 
 
 
 $连接任何对话框的click事件
 $（'。dialogLink'）。live（'click'，function（）{
 alert（$。ui）; // ALERT B 
 return false; 
}）; 
}）; 
  

更新2：

现在我指出问题来自何处，我重新解释了我的问题，并发布了最小代码来重现原始问题：

解决方案

如果我没有弄错，你已经有了一些语法/链接问题：

 Math.random（）* 1000）
 // var dialogDiv = $（document.createElement（'div'））。attr（ id，dialogId）; 
 // dialogDiv等于属性'id'
 //尝试和console.log（dialogDiv）就在这里。我想你想要的是：
 
 var dialogDiv = $（< div />）; 
 dialogDiv.attr（id，dialogId）.load（this.href，function（）{
 var dialog = $（this）.dialog（{autoOpen：false}）; 
 ... 
}）; 
  

我也不认为这是初始化您正在尝试执行的操作的正确方法。 ..你能描述一下在你的页面上发生了什么吗？

你可能会这样想：

  var dialogId ='uniqueName-'+ Math.floor（Math.random（）* 1000）; 
 //在对话框div或字符串中构建一些HTML。 
 theHTML = $（'＃'+ dialogId）.html（）|| < p>这是一串HTML< / p>; $（'body'）。on（'click'，'.button'function（）{
 console.log（$。ui）; 
 $ .dialog（{autoOpen：true ，html：theHTML}）
}）; 
  

...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?

解决方案

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})
});

这篇关于$（this）.dialog不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！