Select elements on panel


#1

Hi. There are some button elements in product page (product.html) and right panel (index.html). They have same class name “button-alternative”.

The folllowing code is in app.js file.

$$(document).on('click','.button-set-alternative',function(e){
        // some codes
        $$('.button-alternative[data-code="'+parent+'"]').addClass('color-green');
});

While product page appers, if I click “button-set-alternative” button in right panel, both of buttons that have “button-alternative” class in right panel and product page are affected.
But if I click “button-set-alternative” button in product page, only one button is affected in product page. The button in the right panel is not affected.

What is the problem?


#2

hi,
you are binding the ‘click’ event to document.
instead bind it to your elements, like panel or page

$$('.my-panel').on('click','.button-set-alternative',function(e) {
..code to run when panel button is clicked...
})

$$('.my-page').on('click','.button-set-alternative',function(e){
..code to run when page button is clicked...
})