为什么调用jQuery UI按钮会破坏我的页面脚本?

时间:2012-09-04 01:06:11

标签: jquery jquery-ui button

我在做什么:

我正在使用三个jQuery UI小部件以及一个单独的基于jQuery的导航菜单。

您可以在此处看到三个UI小部件一起工作:

http://www.dominornovus.com/jquery-test-environment/

(链接功能datepicker,selectmenu和按钮jQuery UI小部件)

问题:

当我将我的工作代码复制到另一个网站时,调用jQuery UI按钮会随机破坏我页面上的所有jQuery(包括单独的基于jQuery的导航菜单):

http://www.dominornovus.com/killyliss-country-house/test/

我提供的两个链接上找到的页面之间的唯一区别是基于jQuery的导航菜单。

请注意,即使我删除了与导航菜单相关的所有代码,对按钮UI小部件的调用仍然会破坏我页面上的jQuery。

我的问题

任何人都可以从两个页面中推断出存在哪些差异以及为什么一个页面在按钮UI调用上失败但另一个页面没有?

我在两个页面之间找不到任何可辨别的差异,但它们的行为却不一样。一打破;另一个没有。

1 个答案:

答案 0 :(得分:0)

经过进一步研究,结果证明这是一个WordPress问题,所以我把问题发布到了WordPress Answers。

简单地说,我两次将jQuery排队。

这是我的最终工作代码(添加到主题的function.php文件中):

    //https://wordpress.stackexchange.com/questions/64062/cannot-enqueue-jquery-correctly-using-google-cdn
    //http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Load_a_default_WordPress_script_from_a_non-default_location

    function my_scripts_method() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.12/jquery.min.js');
        wp_enqueue_script( 'jquery' );
        wp_enqueue_style( 'uicss', '(path_ to_script_location)/my-custom-style.css' );    
        wp_enqueue_script( 'uisel', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.js' );
        wp_enqueue_style( 'uicss2', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.css' );
    }    

    //add_action('wp_enqueue_scripts', 'my_scripts_method'); // selectmenu would not work targeting wp_enqueue_scripts
    add_action('wp_head', 'my_scripts_method'); //use wp_head instead

可以在此处阅读WordPress Answers线程:https://wordpress.stackexchange.com/questions/64062/cannot-enqueue-jquery-correctly-using-google-cdn

过了一段时间,我已经想出如何成功地将selectmenu小部件应用到WordPress。

WordPress安装包含一大堆jQuery脚本。

fnagel selectmenu将无法使用jquery和jquery-ui脚本的默认包,而是必须使用Google CDN在外部引用。

我必须取消注册WordPress的默认本地jQuery库,将Google CDN排队,然后将selectmenu脚本和CSS排入队列。