Select elements on panel

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?

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...
})