[英]jQuery doesn't run on specific Wordpress page
I've got a Wordpress page and i'm running some jQuery to show and hide 2 input fields when someone clicks a checkbox. 我有一个Wordpress页面,当有人单击复选框时,我正在运行一些jQuery以显示和隐藏2个输入字段。 The problem is that this code runs perfectly on my Homepage but when i try to do the same thing (using the exact same html structure & jquery) on a subpage, it no longer works.
问题是该代码可以在我的首页上完美运行,但是当我尝试在子页面上执行相同的操作(使用完全相同的html结构和jquery)时,它将不再起作用。 It's not that the file doesn't get loaded because 1 part of the jQuery file runs fine on that page and I even have a console.log at the end of the file to show the file is fully loaded.
并不是说文件没有被加载,因为jQuery文件的一部分在该页面上运行良好,并且我甚至在文件末尾都有console.log来显示文件已完全加载。
www.yogagids.nl is the homepage, when you click the checkbox "Evenementen" 2 datepicker fields show up, deselect it and they are hidden. www.yogagids.nl是主页,当您单击“ Evenementen”复选框时,将显示2个日期选择器字段,请取消选择它并隐藏它们。 Thats how it should work.
多数民众赞成在它应该如何工作。
www.yogagids.nl/listings Is the page where this doesn't work. www.yogagids.nl/listings是该页面不起作用的页面。 Same story, click the "evenementen" checkbox and the 2 datepicker fields should show and hide.
同样,单击“ evenementen”复选框,然后应显示和隐藏2个datepicker字段。 However on this page nothing happens.
但是在此页面上没有任何反应。
I'm really at a loss here, any and all help would be greatly appreciated. 我真的很茫然,任何帮助都将不胜感激。
Here is all the code that runs on this page, the actual file is larger but i couldn't post that many characters. 这是在此页面上运行的所有代码,实际文件更大,但我不能发布那么多字符。
jQuery( document ).ready(function() {
//Create dummy input fields (altField) to show the user, this way the user sees a proper dateFormat while saving Unix Timestamp in the database.
//Do this for both the Add Listing page and the Search Fields
jQuery( "#event_date_start, #filter_event_date_start" ).after('<input type="text" class="input-text" name="event_date_start_dummy" id="event_date_start_dummy" placeholder="Begindatum"></input>');
jQuery( "#event_date_end, #filter_event_date_end" ).after('<input type="text" class="input-text" name="event_date_end_dummy" id="event_date_end_dummy" placeholder="Einddatum"></input>');
//Define Dutch format and naming for the calendars, set the calendar to use unix date (easier to compare), set an alternative field to show the proper format.
jQuery( "#event_date_start, #filter_event_date_start" ).datepicker({
dateFormat: "@",
altFormat: "dd-mm-yy",
altField: "#event_date_start_dummy",
minDate: 0,
dayNames: [ "Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag" ],
dayNamesMin: [ "Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za" ],
monthNames: [ "januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december" ],
monthNamesShort: [ "jan", "feb", "maa", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec" ],
changeMonth: true,
changeYear: true
});
//Define Dutch format and naming for the calendars, set the calendar to use unix date (easier to compare), set an alternative field to show the proper format.
jQuery( "#event_date_end, #filter_event_date_end" ).datepicker({
dateFormat: "@",
altFormat: "dd-mm-yy",
altField: "#event_date_end_dummy",
minDate: 0,
dayNames: [ "Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag" ],
dayNamesMin: [ "Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za" ],
monthNames: [ "januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december" ],
monthNamesShort: [ "jan", "feb", "maa", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec" ],
changeMonth: true,
changeYear: true
});
//Whenever a user selects a start date, set the minimum end date to the start date.
//This prevents users from selecting end dates that happen before the start date.
jQuery('#event_date_start, #filter_event_date_start').on('change', function() {
// Get the Start Date
var minDate = jQuery( "#event_date_start, #filter_event_date_start" ).val();
// Set the minimum End Date
jQuery( "#event_date_end, #filter_event_date_end" ).datepicker( "option", "minDate", minDate );
});
//Chosen.js is not used on mobile devices, so running this code will interrupt the javascript.
//By running it only if the screen is bigger than 600px we make sure this doesnt happen.
if (window.innerWidth <= 600) {
//Do nothing
} else {
//Category dropdown uses Chosen.js, a dropdown library.
//When on the map view page(/listings) or submit form(/sumbit-listing) but not on my account(/my-account/listings), prevent category dropdown from closing when selecting a category.
if (currentLocation.toLowerCase().indexOf("listings") >= 0 && document.location.href.indexOf('my-account') === -1 || currentLocation.toLowerCase().indexOf("submit-listing") >= 0){
console.log('Chosen dropdown fix active');
//Source of fix: https://github.com/harvesthq/chosen/issues/1546#issuecomment-63448852
//By user: ronanquillevere
var chosen = jQuery('.job-manager-category-dropdown').chosen().data('chosen');
var autoClose = false;
var chosen_resultSelect_fn = chosen.result_select;
chosen.search_contains = true;
chosen.result_select = function(evt) {
var resultHighlight = null;
if(autoClose === false)
{
evt['metaKey'] = true;
evt['ctrlKey'] = true;
resultHighlight = chosen.result_highlight;
}
var stext = chosen.get_search_text();
var result = chosen_resultSelect_fn.call(chosen, evt);
if(autoClose === false && resultHighlight !== null)
resultHighlight.addClass('result-selected');
this.search_field.val(stext);
this.winnow_results();
this.search_field_scale();
return result;
}
};
}
//Get multiple categories from the url, that were passed from home.
//Source: http://stackoverflow.com/questions/22209307/how-to-get-multiple-parameters-with-same-name-from-a-url-in-javascript
function getQueryParams(key) {
qs = location.search;
var params = [];
var tokens;
var re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs))
{
if (decodeURIComponent(tokens[1]) == key)
params.push(decodeURIComponent(tokens[2]));
}
return params;
}
var ms_cats = getQueryParams('ms_cat');
//console.log(ms_cats);
//Set chosen.js values by using the values that were passed in the url.
//Source: http://stackoverflow.com/questions/8980131/changing-selection-in-a-select-with-the-chosen-plugin
jQuery('.job-manager-category-dropdown ').val(ms_cats).trigger('chosen:updated');
jQuery(".listingTypeSelect input[value=event]").change(function() {
console.log('clicked');
if (!jQuery(this).is(':checked')) {
jQuery('.search_event_date').css('display', 'none');
jQuery(".listingTypeSelect input[value=studio]").prop('disabled', false);
jQuery(".listingTypeSelect input[value=teacher]").prop('disabled', false);
if (jQuery(window).width() > 992) {
jQuery('.search_home_row_2 > div').css('width', '33.333%');
} else {
jQuery('.search_home_row_2 > div').css('width', '100%');
}
} else {
jQuery('.search_event_date').css('display', 'inline-block');
jQuery(".listingTypeSelect input[value=studio]").attr('checked', false); // Unchecks it
jQuery(".listingTypeSelect input[value=teacher]").attr('checked', false); // Unchecks it
jQuery(".listingTypeSelect input[value=studio]").prop('disabled', true);
jQuery(".listingTypeSelect input[value=teacher]").prop('disabled', true);
if (jQuery(window).width() > 992) {
jQuery('.search_home_row_2 > div').css('width', '23.333%');
jQuery('.search_home_row_2 .search_event_date').css('width', '30%');
} else {
jQuery('.search_home_row_2 > div').css('width', '100%');
jQuery('.search_home_row_2 .search_event_date').css('width', '100%');
}
}
});
//Notify that the file has loaded without problems.
console.log( "Finished loading listify-child.js!" );
});
I'm almost certain that the checkboxes HTML elements don't exist or are missing the corresponding value/classes when you are binding the change event. 我几乎可以肯定,绑定变更事件时,复选框HTML元素不存在或缺少相应的值/类。 Try using the
on
method and also capture the event in the parent element, taking advantage of "event propagation": 尝试使用
on
方法,并利用“事件传播”功能在父元素中捕获事件:
jQuery(".listingTypeSelect").on('change', 'input[value=event]', function() {
console.log('clicked');
if (!jQuery(this).is(':checked')) {
jQuery('.search_event_date').css('display', 'none');
jQuery(".listingTypeSelect input[value=studio]").prop('disabled', false);
jQuery(".listingTypeSelect input[value=teacher]").prop('disabled', false);
if (jQuery(window).width() > 992) {
jQuery('.search_home_row_2 > div').css('width', '33.333%');
} else {
jQuery('.search_home_row_2 > div').css('width', '100%');
}
} else {
jQuery('.search_event_date').css('display', 'inline-block');
jQuery(".listingTypeSelect input[value=studio]").attr('checked', false); // Unchecks it
jQuery(".listingTypeSelect input[value=teacher]").attr('checked', false); // Unchecks it
jQuery(".listingTypeSelect input[value=studio]").prop('disabled', true);
jQuery(".listingTypeSelect input[value=teacher]").prop('disabled', true);
if (jQuery(window).width() > 992) {
jQuery('.search_home_row_2 > div').css('width', '23.333%');
jQuery('.search_home_row_2 .search_event_date').css('width', '30%');
} else {
jQuery('.search_home_row_2 > div').css('width', '100%');
jQuery('.search_home_row_2 .search_event_date').css('width', '100%');
}
}
});
It might be necessary to capture the event higher in the DOM. 可能有必要在DOM中捕获更高的事件。 Example in
search_jobs
div. search_jobs
div中的示例。
jQuery(".search_jobs").on('change', '.listingTypeSelect input[value=event]', function() {
//Code
});
On https://www.yogagids.nl/ form is: 在https://www.yogagids.nl/上,表格是:
<form class="job_search_form" action="https://www.yogagids.nl/listings/" method="GET">
and on https://www.yogagids.nl/listings/ : 并在https://www.yogagids.nl/listings/上 :
<form class="job_filters">
So it's about rendering different html and in second case you don't have action and method attributes. 因此,这是关于呈现不同的html的情况,在第二种情况下,您没有操作和方法属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.