Wordpress：2个自定义构建插件之间的JQuery冲突答案

【问题标题】：Wordpress: JQuery conflict between 2 cutsom built pluginsWordpress：2个自定义构建插件之间的JQuery冲突
【发布时间】：2016-05-30 20:49:09
【问题描述】：

所以，我创建了 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，则只会填充插件 1 的国家和类别下拉列表。尝试选择一个国家来填充与相关国家城市的城市下拉列表，将无法正常工作。这在所有浏览器中都是一致的。

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

【问题讨论】：

标签： javascript php jquery html wordpress

【解决方案1】：

你可以在包含 JS 之前放一个页面检查，

if ($page==='mypluginpage') { wp_enqueue_script( 'getregions-script', plugin_dir_url(FILE) 。 “assets/getregions.js”，数组（'jquery'），'1.0'，真 ); }

【讨论】：

我在执行您的建议时收到以下错误消息，Notice: Undefined variable: page in /var/www/html/wp-content/plugins/gyms-of-the-world/gyms-of-the-world.php。 $page 是全局变量吗？我应该指定 $page==='the actual plugin name.php' 还是包含实际短代码 http://192.0.0.0/index.php/regionspages/ 的 wordpress 页面？
好的，所以我解决了这个问题，global $post;如果（in_array（$post->post_name，array（'testing-2'，'gyms-of-the-world'，'gyms-of-the-world.php'）））{wp_enqueue_script（'getregions-script' , plugin_dir_url(FILE) . "assets/getregions.js", array('jquery'), '1.0', true ); }

【解决方案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!

【讨论】：