对话框不是函数错误

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  

并且此行突出显示

"取消":function(event){

当我在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();在添加另一个使用的JavaScript库时使用$.你的选择是:

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)