对话框不是函数错误

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。

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

这删除了jQuery 的$ 快捷方式，这就是它不再是一个函数的原因。当您添加另一个使用 $ 的 javascript 库时，通常只使用 $.noConflict();。您的选择是：

1. 不要使用$.noConflict();。
2. 使用$.noConflict(); 并将每个$ 替换为jQuery。
3. 使用$.noConflict(); 并使用(function($){ ... })(jQuery) 包装您的代码

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

(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。

两种解决方案

这基本上意味着您应该编写像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);