将元素存储到对象中以用作点击处理程序无法正常工作（jQuery / javascript）

Question

This code works correctly:

function clickHandler(){
    $(config.container).find('.'+config.play).on('click',function(){
        console.log('clicked');
    }
}

However when I place the element into a variable for easier use, it doesn't work:

var element={
    play:$(config.container).find('.'+config.play)
}

function clickHandler(){
    element.play.on('click',function(){
        console.log('clicked');
    }
}

Am I doing something incorrect here? Thanks.

Answer 1

The issue is that you are trying to access elements before they exist. In your top code example, the DOM elements are not being searched for until the clickHandler() function is executed. Whereas in the bottom code example, it is trying to find the DOM elements immediately, and presumably, in your case, they don't exist yet.

Here are a couple alternatives to solve your issue:

1) Event Delegation

$(config.container).on('click', '.' + config.play,function(){
    console.log('clicked');
});

2) Turn element.play into a function

var element={
    play: function () {
        return $(config.container).find('.'+config.play);
    }
}

function clickHandler() {
    element.play().on('click', ...);
}