jQuery不在特定的Wordpress頁面上運行

Question

我有一個Wordpress頁面，當有人單擊復選框時，我正在運行一些jQuery以顯示和隱藏2個輸入字段。 問題是該代碼可以在我的首頁上完美運行，但是當我嘗試在子頁面上執行相同的操作（使用完全相同的html結構和jquery）時，它將不再起作用。 並不是說文件沒有被加載，因為jQuery文件的一部分在該頁面上運行良好，並且我甚至在文件末尾都有console.log來顯示文件已完全加載。

www.yogagids.nl是主頁，當您單擊“ Evenementen”復選框時，將顯示2個日期選擇器字段，請取消選擇它並隱藏它們。 多數民眾贊成在它應該如何工作。

www.yogagids.nl/listings是該頁面不起作用的頁面。 同樣，單擊“ evenementen”復選框，然后應顯示和隱藏2個datepicker字段。 但是在此頁面上沒有任何反應。

我真的很茫然，任何幫助都將不勝感激。

這是在此頁面上運行的所有代碼，實際文件更大，但我不能發布那么多字符。

    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!" );
    });

Answer 1

我幾乎可以肯定，綁定變更事件時，復選框HTML元素不存在或缺少相應的值/類。 嘗試使用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%');
            }

        }
    });

可能有必要在DOM中捕獲更高的事件。 search_jobs div中的示例。

jQuery(".search_jobs").on('change', '.listingTypeSelect input[value=event]', function() {
   //Code
});

Answer 2

在https://www.yogagids.nl/上，表格是：

<form class="job_search_form" action="https://www.yogagids.nl/listings/" method="GET">

並在https://www.yogagids.nl/listings/上 ：

<form class="job_filters">

因此，這是關於呈現不同的html的情況，在第二種情況下，您沒有操作和方法屬性。