0

I am registering custom event handlers using .on() in $(document).ready() but they are not being triggered.

I have verified in both Chrome and Firefox that

  1. The events are being registered to the correct elements,
  2. The handler is working correctly,
  3. The even is being triggered on the correct elements

I've also registered the same handler under a built-in event (e.g. click) and everything works perfectly.

I tried to create a minimum working example, but haven't been able to replicate this behavior.

Of Relevance

  • Everything works in jQuery 1.12.4, but not in 3.2.1
  • The code is being run as part of a custom WordPress 4.9.1 plugin
  • Test Page
  • Full Code
  • The custom event is named eor:date-change
  • The event is registered and triggered on .eor-calendar elements
  • The basic logic flow is a user clicks on a navigation button ( .eor-nav ) which sets the date on the calendar ( .eor-calendar ) via the data-current-date attribute. The eor:date-change event is then triggered which updates the dates on the calendar, and triggers an eor:appointment-change event on each of the appointments. The appointments then update their data accordingly.

Relevant Code

$( document ).ready( function( ) { 
    $( '.eor-calendar' ).on( 'eor:date-change', function() {
        eor_updateCalendarToCurrentDate( $( this ) );
    } );
} );

function eor_setCalendarDate( date, calendar, timezone ) {
    var $ = $ || jQuery;

    if( ! ( date instanceof Date ) ) {
        date = new Date( date );
    }
    if( ! calendar ) {
        calendar = $( '.eor-calendars-wrapper .eor-calendar' );
    }

    calendar.each( function() {
        var self = $( this );
        var startDate = eor_stringToDate( self.data( 'start-date' ), timezone );
        var endDate = ( self.data( 'end-date' ) ? eor_stringToDate( self.data( 'end-date' ), timezone ) : undefined );

        if( startDate <= date ) { 
            if( ! endDate || date <= endDate ) { 
                // set date
                var dateString = eor_dateToString( date ); 
                self.attr( 'data-current-date', dateString );
                self.data( 'current-date', dateString );

                // trigger event to update calendar
                self.trigger( 'eor:date-change' ); 
            }
        }
    } );
}

Update 1 When checking the jQuery version ($.fn.jquery) I get

3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector

Perhaps the functionality I need has been removed by WordPress. If this is the case how can I include it?

bicarlsen
  • 1,011
  • 7
  • 25
  • Welcome to Stack Overflow! The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable ([here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). More: [*How do I ask a good question?*](/help/how-to-ask) – T.J. Crowder Feb 10 '18 at 11:41
  • Thanks for putting the code in the question. But why would you not make it a [runnable example](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha), to help people help you? – T.J. Crowder Feb 10 '18 at 11:58
  • I've tried to create a MCVE, but have't been able to replicate the behavior, so am unsure what to do. – bicarlsen Feb 10 '18 at 12:07
  • I'm sure there's a duplicate somewhere but this should solve your issue. Check [Is there a way turn off jquery noconflict mode in Wordpress?](https://stackoverflow.com/q/17687619/1287812) - [jQuery fuction not working in wordpress](https://stackoverflow.com/q/32593041/1287812) - [TypeError: 'undefined' is not a function (evaluating '$(document)')](https://stackoverflow.com/a/7975203/1287812) – brasofilo Feb 10 '18 at 13:12
  • @brasofilo That was indeed the issue. I'm a bit confused though because the `$( document.ready() )` call is wrapped in `( function( $ ){ ... } )( jQuery )` to avoid this. Any ideas on why it is still running into issues? – bicarlsen Feb 10 '18 at 14:16
  • The easiest is to wrap everything inside document.ready and to make sure you're enqueing all the scripts correctly. Check the lists "Linked" and "Related" of the duplicate question – brasofilo Feb 10 '18 at 15:11
  • @brasofilo It turns out the noconflict was an indirect consequence of something else going on. I noticed that everything worked fine if I wasn't logged in as an admin to the WP site. After investigating I found that the WP Admin bar loads `https://code.jquery.com/jquery-3.2.1.slim.min.js` which was interfering with the usual loaded jQuery. – bicarlsen Feb 10 '18 at 21:24

0 Answers0