Calling jQuery Function on Selector

Question

I'm having an issue where I'm trying to call a function on a selector, and use jQuery to edit/add classes to elements within that selector.

Below is my code:

(function($) {
    $(document).on('click', '.one a.button', function(){
        $('.two').loadQuestions();
    });
})(jQuery);
function loadQuestions( $ ) {
    $(this).addClass('active');
    $(this).children().addClass('transition-in');
    $(this).find('.tilt').delay(100).textillate({ 
        in: { effect: 'fadeInLeft' } 
});

It keeps giving me this error:

undefined is not a function - in regards to:
    $('.two').loadQuestions();

You need to use ' $.fn.' in your function, as can be seen in this thread: http://stackoverflow.com/questions/12093192/how-to-create-a-jquery-function — Michal Paszkiewicz, Dec 11 '14 at 10:06

score 2 · Answer 1 · answered Dec 11 '14 at 10:06

2

You're using loadQuestions as a plugin. For that you need to attach it to $.fn

$.fn.loadQuestions = function(options) {
    $(this).addClass('active');
    $(this).children().addClass('transition-in');
    $(this).find('.tilt').delay(100).textillate({ in: { effect: 'fadeInLeft' } });
    return this; // important
});

Or use it as a normal function

function loadQuestions(that) {
    that.addClass('active');
    that.children().addClass('transition-in');
    that.find('.tilt').delay(100).textillate({ in: { effect: 'fadeInLeft' }}); 
});
loadQuestions($('.two')); // call it

answered Dec 11 '14 at 10:06

Amit Joki

58,320
7
77
95

1

You don't need to use `$(that)`, since the argument is already a jQuery object. Just use `that.addClass(...)`. – Barmar Dec 11 '14 at 10:08
One more stupid option: `loadQuestions.call($('.two'));` :) – dfsq Dec 11 '14 at 10:11
@dfsq it indeed is :) – Amit Joki Dec 11 '14 at 10:14

Calling jQuery Function on Selector

1 Answers1