WordPress：2个Cutsom内置插件之间的JQuery冲突

Question

因此，我创建了2个插件，每个插件都被加载到页面中，plugin1-> regionpages（ http://192.0.0.0/index.php/regionpages/ ）和plugin2-> regionresults（ http://192.0.0.0 /index.php/searchresults/ ）。

插件1和相关的javascript：

 function initialize() { feedData(); categoriesData(); } jQuery(document).ready(function () { initialize(); jQuery('#CountryList').change(function(){ var enableButtonTemp = jQuery('#CountryList').val(); if (enableButtonTemp === null || enableButtonTemp === "null" || enableButtonTemp === "") { //Check to see if there is any text entered console.log(enableButtonTemp); jQuery('.enableOnInput').prop('disabled', true); } else if (enableButtonTemp !== null || enableButtonTemp !== "null" || enableButtonTemp !== "") { console.log("The value of countries is " + enableButtonTemp + " so the submit button has been made clickable."); jQuery('.enableOnInput').prop('disabled', false); } }); }); function feedData() { jQuery(document).ready(function () { console.log("feedData is successfully hit."); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getCountryList", serialized}, success: function (data, status, error) { //alert(data.html); jQuery('#CountryList').append(data.html); }, error: function (data, status, error) { alert("failed in feedData. The following data is being returned: " + data.html); console.log(data); console.log(status); console.log(error); } }); }); } function categoriesData(){ jQuery(document).ready(function () { console.log("categoriesData is successfully hit."); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "categoriesList", serialized}, dataType: "json", success: function (data) { jQuery('#CategoriesList').append(data.html); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } function getCities() { jQuery(document).ready(function () { console.log("getCities is successfully hit."); jQuery('#CityList').empty(); jQuery('#TownList').empty(); var countryVal = jQuery("#CountryList").val(); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getCityList", countryID: countryVal, serialized}, dataType: "json", success: function (data) { jQuery('#CityList').append(data.html); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } function getTowns() { jQuery(document).ready(function () { console.log("getTowns is successfully hit."); var cityVal = jQuery("#CityList").val(); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getTownList", cityID: cityVal, serialized}, dataType: "json", success: function (data) { console.log(data); jQuery('#TownList').append(data.html); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } function getUserIDs() { jQuery(document).ready(function () { console.log("getUserIDs is successfully hit."); var countryVal = jQuery("#CountryList").val(); var cityVal = jQuery("#CityList").val(); var townVal = jQuery("#TownList").val(); var categoriesVal = jQuery("#CategoriesList").val(); var serialized = jQuery('#MyForm').serialize(); var url = window.location.hostname; jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getUserIDs", countryID: countryVal, cityID: cityVal, townID: townVal, categoriesID: categoriesVal, locationHref: url, serialized}, dataType: "json", success: function (data) { localStorage.setItem('dataObjectTemp2', JSON.stringify(data)); var numericRecCount = parseInt(data.c); jQuery('#MyForm').submit(function (data) { jQuery.post('', function (data) { document.location.href = window.location.hostname + '/index.php/searchresults/'; }); return false; }); }, error: function (data, status, error) { alert("No records were returned for your search. Please make another selection."); console.log(data); console.log(status); console.log(error); } }); }); } 

 function getregions_scripts() { wp_enqueue_script( 'getregions-script', plugin_dir_url(__FILE__) . "assets/getregions.js", array('jquery'), '1.0', true ); wp_localize_script( 'getregions-script', 'gymRegions', array('ajaxurl' => admin_url('admin-ajax.php')) ); } add_action( 'wp_enqueue_scripts', 'getregions_scripts' ); if ( is_admin() ) { add_action( 'wp_ajax_showcountries', 'showcountries_callback' ); add_action( 'wp_ajax_no_priv_showcountries', 'showcountries_callback' ); add_action( 'wp_ajax_showcountries_frontend', 'showcountries_frontend' ); add_action( 'wp_ajax_no_priv_showcountries_frontend', 'showcountries_frontend' ); }else{ } function showcountries_callback() { } function showcountries_frontend() { $the_html = ' <form id="MyForm" method="Post"> <div style="float: left"> <select id="CountryList" onchange="getCities()" style="width: 150px !important; min-width: 150px; max-width: 150px;"></select> <select id="CityList" onchange="getTowns()" style="width: 150px !important; min-width: 150px; max-width: 150px;"></select> <select id="TownList" style="width: 150px !important; min-width: 150px; max-width: 150px;"></select> <select id="CategoriesList" style="width: 170px !important; min-width: 170px; max-width: 170px;"></select> </div> <input type="submit" name="submit" id="submitBtn" class="enableOnInput" disabled="disabled" onclick="getUserIDs()" /> </form>'; return $the_html; } add_shortcode("sc_frontend", "showcountries_frontend"); 

Plugin2，及其相关的javascript：

 (function( $ ) { "use strict"; $(function() { $(document).ready(function () { feedNewResults(); function feedNewResults() { //$(document).ready(function () { var dataObject2 = JSON.parse(localStorage.getItem('dataObjectTemp2')); $('#searchNewCount').append(dataObject2.c); $('#searchNewResult').append(dataObject2.q); } function locationChange(val){ localStorage.setItem('dataDetailedSearch', JSON.stringify(val)); window.location.href = window.location.hostname + "/index.php/detailed-search-results/?uid=" + val; } }); }); }(jQuery)); 

  function getnewsearchresults_scripts() { wp_enqueue_script( 'getnewsearchresults-script', plugin_dir_url(__FILE__) . "assets/getnewsearchresults.js", array('jquery'), '1.0', true ); wp_localize_script( 'getnewsearchresults-script', 'resultsNewSearch', array('ajaxurl' => admin_url('admin-ajax.php')) ); } add_action( 'wp_enqueue_scripts', 'getnewsearchresults_scripts' ); add_action( 'wp_ajax_newsearchresults', 'newsearchresults_callback' ); add_action( 'wp_ajax_no_priv_newsearchresults', 'newsearchresults_callback' ); 

现在来了有趣的部分。 如果我停用插件2，则插件1可以正常工作。 但是，如果我让插件2保持激活状态，那么只会填充plugin1的国家/地区和类别下拉列表。 尝试选择一个国家/地区，以使用相关的国家/地区城市填充城市下拉菜单，然后将不起作用。 这在所有浏览器中都是一致的。

如何解决这个jQuery冲突问题？

Answer 1

您可以在添加JS之前进行页面检查，

if（$ page ==='mypluginpage'）{wp_enqueue_script（'getregions-script'，plugin_dir_url（ FILE ）。“ assets / getregions.js”，array（'jquery'），'1.0'，true）; }

Answer 2

尝试使用“ wp_enqueue_script”函数加载jQuery。 它会检查jQuery是否尚未加载，是否将其加载，以及是否已加载，则不执行任何操作。 这是此功能的用法示例代码。

wp_register_script('jquery', get_template_directory_uri().'/assets/js/vendor/jquery-1.11.0.min.js', '1.0.0');
wp_enqueue_script('jquery'); // Enqueue it!