buttons within button clickable indepedently

[Anonymous]

Hello, I'm working on the following editor: http://science-travel-com.stackstaging.com/cpicks/

In the left colum I have buttons, onclick triggers a drop down menue here (I have no entries for now, but this will follow).
No my question: Can I trigger these buttons: ('sort', '+', 'DEL') independently from the parent button? Thanks.

 

[Anonymous]

What happened when you tried it?

 

[Anonymous]

What happened when you tried it?

I happens that the sourrounding button is triggered, of course. I mean it must be like that, that the click-event of the parent button is not inherited to the children button elements. I didn't find aynthing with google.

 

[Anonymous]

I deactivate the click-functionality of the parent button, but then I have to refresh the page in order to make onclick work again

  $('.plus').on('click',function(){
	     
	        $('.accordion').off('click');
	        
	       //...........
	    });

 

[ahmedarain34]

Yes, it is possible to trigger the buttons independently from the parent button in your editor. To achieve this, you need to modify the JavaScript code that handles the button clicks.

Here's a general approach to implementing independent button triggers:

1. Assign unique IDs to each button: In your HTML code, make sure each button has a unique ID attribute. For example, you can assign IDs like "sort-btn", "add-btn", and "del-btn" to the corresponding buttons.

html
<button id="sort-btn">Sort</button>
<button id="add-btn">+</button>
<button id="del-btn">DEL</button>

1. Modify the JavaScript code: In your JavaScript code, you'll need to add event listeners to each button separately and define the actions you want to perform when each button is clicked.

// Get references to the buttons
const sortBtn = document.getElementById('sort-btn');
const addBtn = document.getElementById('add-btn');
const delBtn = document.getElementById('del-btn');

// Add event listeners to each button
sortBtn.addEventListener('click', function() {
// Actions to perform when the "Sort" button is clicked
// Implement your logic here
});

addBtn.addEventListener('click', function() {
// Actions to perform when the "+" button is clicked
// Implement your logic here
});

delBtn.addEventListener('click', function() {
// Actions to perform when the "DEL" button is clicked
// Implement your logic here
});

By assigning unique IDs to each button and adding separate event listeners, you can trigger the buttons independently from the parent button. Inside the event listener functions, you can write the logic specific to each button's functionality.
Make sure to replace the comments "// Actions to perform..." with your own code that defines what should happen when each button is clicked.
With this modification, each button will have its own click event handler, allowing you to trigger their respective actions independently.