对话框不是函数错误

Question

我有这个用于问题对话框的JavaScript代码：

// Question Dialog
function deletedialog(button, a){      
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $(button).closest("form").find("[id$=deleterow]").click();
                $(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}

但由于某些原因我无法找到我在Firebug中收到此错误：

TypeError: $(...).dialog is not a function  

并突出显示该行

“取消”：功能（事件）{

当我在JSF头中添加它以防止JQuery和Primefaces冲突时，会出现此问题：

<script type="text/javascript">
    $.noConflict();
</script>

我如何解决这个问题？

Answer 1

问题

问题是使用$函数删除了$.noConflict()符号。请改用jQuery。

两种解决方案

这基本上意味着你应该编写像jQuery(this).dialog("close");而不是$(this).dialog("close");这样的函数调用。

要为更大的代码片段实现更改，您可以这样做：

(function($){
    // ... old code using "$" instead of "jQuery"
})(jQuery);

解决方案号1 - 多次替换 - 示例

使用$(...)替换jQuery(...)来电的解决方案可能如下所示：

// Question Dialog
function deletedialog(button, a){      
    jQuery("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                jQuery(button).closest("form").find("[id$=deleterow]").click();
                jQuery(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                jQuery(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}

解决方案号2 - 在匿名函数中包含代码 - 示例

这是基于您可以创建匿名函数并将jQuery传递给它的事实，但将其分配给名为$的参数 - 这将导致$符号可用于在$.noConflict()调用之前就好像它会发生一样：

(function($){
    // Question Dialog
    function deletedialog(button, a){      
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    $(button).closest("form").find("[id$=deleterow]").click();
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                } 
            }
        });         
    }
})(jQuery);

Answer 2

在$.noConflict();之前，$等于jQuery。

在$.noConflict();之后，$等于undefined。

这会删除$的{​​{1}}快捷方式，这就是为什么它不再是一个功能了。您通常只在添加使用jQuery的其他JavaScript库时才使用$.noConflict();。您的选择是：

1. 请勿使用$。
2. 使用$.noConflict();并将$.noConflict();替换为$。
3. 使用jQuery并使用$.noConflict();
打包您的代码

如果您需要使用(function($){ ... })(jQuery)，我建议使用第三个。它通过传递jQuery作为参数将$重新映射到jQuery。使用您发布的代码，它可能看起来像......

$.noConflict();