jQuery UI选项卡无法在WordPress 4.4及更高版本中运行

在我的Wordpress主题中，我有一个使用jQuery UI选项卡的Theme Options页面。 这些选项卡完全适用于4.4以下的Wordpress版本。 但它们似乎不适用于4.4之后的版本

它只是不会给出任何错误或任何错误。 选项页面中的其他jQuery函数（例如jQuery color-picker，slider..etc。）工作正常。 它只是被打破的标签。

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

Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier. 

它来自jQuery.js文件，该文件包含在wp-include/js/jQuery文件夹中

这是我的代码……

 
 
 foreach ( $this->sections as $section_slug => $section ) echo '
' . $section . '
'; 
 
  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("
"); 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"); });  

这种奇怪行为的原因是什么？ 这是我的代码中的东西吗？ 但它在旧版WP中运行良好。 任何线索？

Answer 1

最后我想出了我自己的问题的答案……

实际上，这个错误是因为WP在后端接口中的一些核心变化。 他们改变了后端标题结构因此，WordPress 4.3中的

标签不再是

，而是4.4及更高版本。

因此，在自定义选项页面中，在WP 4.3中，标题呈现为

标记。 并且，这些标题被绑定到我的javascript代码为.h2 。 所以，这就是错误发生的地方。

这个小错误导致整个JavaScript块出现故障。 所以，jQuery选项卡不起作用。

您可以通过检查员进行探索。 见下图。

如你所见，Wordpress 4.3中的标题呈现为

但在Wordpress 4.4中，它们是

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

由此…

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

喜欢这个……

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

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

希望这可以帮助！