jQuery UI Tabs在Wordpress 4.4及更高版本中不起作用 [英] jQuery UI Tabs not working in Wordpress 4.4 and later

问题描述

在我的Wordpress主题中，我有一个主题选项页面，该页面使用jQuery UI选项卡. 这些选项卡在4.4以下的Wordpress版本中可以完美使用.但是它们似乎不适用于4.4以后的版本

In my Wordpress theme, I have a Theme Options page which is using jQuery UI tabs. These tabs perfectly works in Wordpress versions below 4.4. But they don't seem to work in the versions later than 4.4

它只是不给出任何错误或任何东西.选项页面中的其他jQuery函数(例如jQuery彩色选择器，滑块..等)都可以正常工作.只是选项卡已损坏.

It just don't give any error or anything. The other jQuery functions (such as jQuery color-picker, slider..etc.) in the options page are working fine. It's just the tabs which are broken.

在控制台中，我收到此消息

In the console I get this message

Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.

来自wp-include/js/jQuery文件夹中包含的jQuery.js文件

It's from the jQuery.js file which is included in wp-include/js/jQuery folder

这是我的代码...

<div class="ui-tabs">
      <ul class="ui-tabs-nav">

       foreach ( $this->sections as $section_slug => $section )
         echo '<li><a href="#' . $section_slug . '">' . $section . '</a></li>';

      </ul>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
            var sections = [];';

            foreach ( $this->sections as $section_slug => $section )
                    echo "sections['$section'] = '$section_slug';";

            echo 'var wrapped = jQuery(".wrap h3").wrap("<div class=\"ui-tabs-panel\">");
            wrapped.each(function() {
                    jQuery(this).parent().append(jQuery(this).parent().nextUntil("div.ui-tabs-panel"));
            });
            jQuery(".ui-tabs-panel").each(function(index) {
                    jQuery(this).attr("id", sections[jQuery(this).children("h3").text()]);
                    if (index > 0)
                            jQuery(this).addClass("ui-tabs-hide");
            });
            jQuery(".ui-tabs").tabs({
                    fx: { opacity: "toggle", duration: "fast" }
            });

            jQuery("input[type=text], textarea").each(function() {
                    if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "")
                            jQuery(this).css("color", "#999");
            });

            jQuery("input[type=text], textarea").focus(function() {
                    if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") {
                            jQuery(this).val("");
                            jQuery(this).css("color", "#000");
                    }
            }).blur(function() {
                    if (jQuery(this).val() == "" || jQuery(this).val() == jQuery(this).attr("placeholder")) {
                            jQuery(this).val(jQuery(this).attr("placeholder"));
                            jQuery(this).css("color", "#999");
                    }
            });

            jQuery(".wrap h3, .wrap table").show();

            // This will make the "warning" checkbox class really stand out when checked.
            // I use it here for the Reset checkbox.
            jQuery(".warning").change(function() {
                    if (jQuery(this).is(":checked"))
                            jQuery(this).parent().css("background", "#c00").css("color", "#fff").css("fontWeight", "bold");
                    else
                            jQuery(this).parent().css("background", "none").css("color", "inherit").css("fontWeight", "normal");
            });

            // Browser compatibility
            if (jQuery.browser.mozilla) 
                     jQuery("form").attr("autocomplete", "off");
    });
</script>

这种奇怪行为的原因是什么?我的代码中有东西吗?但是它在WP的旧版本中可以正常工作.有任何线索吗?

What's the reason for this odd behavior ? Is it something in my code ? But it works fine in older versions of WP. Any clue ?

推荐答案

最后，我找到了自己问题的答案...

Finally I figured the answer for my own question...

实际上，此错误是由于WP在后端接口中进行了一些核心更改而引起的.他们已经更改了后端标题结构，因此，在WordPress 4.3中，您的<h3>标记在4.4及更高版本中不再是<h3>.

Actually, this error was because of WP's some core changes in the backend interface. They've changed the Backend headings structure So, your <h3> tag in WordPress 4.3, is no longer <h3> anymore in 4.4 and higher.

因此，在WP 4.3中的自定义选项页面中，标题被呈现为<h2>标签.并且，这些标题以.h2的形式绑定到了我的javascript代码.因此，这就是发生错误的地方.

So, in the custom options page, in WP 4.3, the titles were rendered as <h2> tags. And, that titles were binded to my javascript code as .h2. So, that's where the error occurred.

这个小错误导致整个JavaScript块发生故障.因此，jQuery选项卡不起作用.

That small error caused the entire JavaScript block to malfunction. So, jQuery tabs didn't work.

您可以与检查器一起探索.参见下图.

You can explore this with inspector. See the image below.

如您所见，Wordpress 4.3中的标题渲染为<h3>，但在Wordpress 4.4中，标题为<h2>

As you can see the Titles in Wordpress 4.3 were rendered as <h3> but in Wordpress 4.4, they're <h2>

所以，我所做的只是调整我的JavaScript代码以将Title绑定为.h2和.h3

So, what I did was just adjusting my JavaScript code to bind the Title as both .h2 and .h3

从这里...

jQuery(this).children("h2").text();

喜欢这个...

jQuery(this).children("h2, h3").text();

这确实对我有用.您的代码可能与我的代码不同.但是，导致问题的原因可能是...

This did work for me. Your code may be different than mine. But, the cause for the problem can be it...

希望这会有所帮助！

这篇关于jQuery UI Tabs在Wordpress 4.4及更高版本中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！