Menu icon Foundation
events not working when used in a separate .js file

I'm using foundation-sites v6.5.1.

 

***Explanation of my setup:***

 

I'm importing foundation like this in my `main.js` file.

 

    import $ from 'jquery';

    

    import whatInput from 'what-input';

    

    window.$ = $;

    

    import Foundation from 'foundation-sites';

   

    Foundation.addToJquery(jQuery);

    

    $(document).foundation();

    

    import motionUI from 'motion-ui';

    

    

    import fDatepicker from 'foundation-datepicker';

 

    import custom from './custom.js';

 

The file is compiled with gulp:

 

    function scripts(cb){

    return browserify({

    entries: js.entrySrc

    })

    .transform( babelify, { presets: [ '@babel/preset-env' ] } )

    .bundle()

    .pipe( source(js.src) )

    .pipe( rename( {

    extname: '.min.js'

    } ) )

    .pipe( buffer() )

    .pipe( gulpif( production, stripDebug() ) )

    .pipe( gulpif( !production, sourcemaps.init({ loadMaps: true }) ) )

    .pipe( gulpif( production, uglify() ) )

    .pipe( sourcemaps.write( '.' ) )

    .pipe( gulp.dest( js.dest ) )

    .pipe( notify ({ message: 'Assets compiled!' }) )

    .pipe( browserSync.stream(), cb );

    }

 

This all works as expected.

 

I'm enqueueing it in Wordpress with jquery as a dependency.

Wordpress is loading it in this order:

 

    jquery

    main.js

    3rdparty.js

 

The issue is with the separate `3rdparty.js` file.

 

I'm using some foundation events to manipulate some elements.

For example:

 

    $('#testing').on('down.zf.accordion up.zf.accordion', function() {

    console.log('open');

    });

    

The problem now is that the events don't fire when used in the `3rdparty.js`.

 

They work fine when used directly in the `main.js` or if used and imported with the `custom.js` file.

 

To get it to work in `custom.js` I had to to start the file with, 

 

    import $ from 'jquery';

    

    $(document).ready(function custom() {...

 

despite doing so already in `main.js`, otherwise the events were **not working.**

 

However, the events **do work** when I use a CDN for foundation and enqueue it directly in Wordpress, so that the order is:

 

    jquery

    foundation.js

    main.js

    3rdparty.js

 

   

The big question is now, why are the events not firing in `3rdparty.js`?

 

 

 

 

 

 

events

I'm using foundation-sites v6.5.1.

 

***Explanation of my setup:***

 

I'm importing foundation like this in my `main.js` file.

 

    import $ from 'jquery';

    

    import whatInput from 'what-input';

    

    window.$ = $;

    

    import Foundation from 'foundation-sites';

   

    Foundation.addToJquery(jQuery);

    

    $(document).foundation();

    

    import motionUI from 'motion-ui';

    

    

    import fDatepicker from 'foundation-datepicker';

 

    import custom from './custom.js';

 

The file is compiled with gulp:

 

    function scripts(cb){

    return browserify({

    entries: js.entrySrc

    })

    .transform( babelify, { presets: [ '@babel/preset-env' ] } )

    .bundle()

    .pipe( source(js.src) )

    .pipe( rename( {

    extname: '.min.js'

    } ) )

    .pipe( buffer() )

    .pipe( gulpif( production, stripDebug() ) )

    .pipe( gulpif( !production, sourcemaps.init({ loadMaps: true }) ) )

    .pipe( gulpif( production, uglify() ) )

    .pipe( sourcemaps.write( '.' ) )

    .pipe( gulp.dest( js.dest ) )

    .pipe( notify ({ message: 'Assets compiled!' }) )

    .pipe( browserSync.stream(), cb );

    }

 

This all works as expected.

 

I'm enqueueing it in Wordpress with jquery as a dependency.

Wordpress is loading it in this order:

 

    jquery

    main.js

    3rdparty.js

 

The issue is with the separate `3rdparty.js` file.

 

I'm using some foundation events to manipulate some elements.

For example:

 

    $('#testing').on('down.zf.accordion up.zf.accordion', function() {

    console.log('open');

    });

    

The problem now is that the events don't fire when used in the `3rdparty.js`.

 

They work fine when used directly in the `main.js` or if used and imported with the `custom.js` file.

 

To get it to work in `custom.js` I had to to start the file with, 

 

    import $ from 'jquery';

    

    $(document).ready(function custom() {...

 

despite doing so already in `main.js`, otherwise the events were **not working.**

 

However, the events **do work** when I use a CDN for foundation and enqueue it directly in Wordpress, so that the order is:

 

    jquery

    foundation.js

    main.js

    3rdparty.js

 

   

The big question is now, why are the events not firing in `3rdparty.js`?