javascript - 对话框不是函数错误

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。

这删除了 ​​的$快捷方式jQuery，这就是它不再是函数的原因。您通常仅$.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)