Why do all javascript functions execute when I click on only one?

Question

Using jQuery, I am trying to create a dynamic menu bar whose selections change as I click on different items.

Here is the simple HTML

<div class="global">

   <nav class='menubar'>
      <button class='btn websites'>Websites</button>
      <button class='btn contacts'>Contacts</button>
      <button class='btn finance'>Finance</button>
   </nav>

   <div class="workspace">

   </div>
</div>

And the javascript

// click on navbar only
$($nav_menu).on('click',  (e)=> {
    console.log("Menu Bar")
    $nav_menu.load('/main_menu.html');
})

// click on any button
$($nav_menu).on('click', $btn_websites, ()=> {
    //$nav_menu.html("");
    console.log("Websites")
    //$nav_menu.load('/website_menu.html');
})

// click on any button
$($nav_menu).on('click', $btn_contacts, ()=> {
    //$nav_menu.html("");
    console.log("Contacts")
    //$nav_menu.load('/contact_menu.html');
})

// click on any button
$($nav_menu).on('click', $btn_finance, ()=>{
    //$nav_menu.html("");
    console.log("Finance")
   // $nav_menu.load('/finance_menu.html');
})

The problem is that regardless of which item I click on, or if I click only on the menu bar itself, all of the functions are executed. Console log shows that each function has fired.

Thank you

Without knowing what $btn_websites / $btn_contacts / $btn_finance is, any solution would be just a guess. These must be strings and the outdated $ implies these are jquery collections, which don't work for filters on event delegation, so are probably getting ignored, thus your problem. Please see minimal reproducible example. — fdomn-m
– fdomn-m, Commented May 4, 2022 at 18:32

Albert Alberto · Accepted Answer · 2022-05-04 18:33:41Z

1

The best you can do apart from what you are going is as below

$(".menubar .websites").on('click',(e)=>{
    e.preventDefault();
    load('/website_menu.html');
});

$(".menubar .finance").on('click',(e)=>{
    e.preventDefault();
    load('/finance_menu.html');
});

$(".menubar .contacts").on('click',(e)=>{
    e.preventDefault();
    load('/contacts_menu.html');
});

You will have to add another link to open the main menu. Make sure you have the load function to open the requested page ie

function load(page_path){
$.get(page_path, function(data) {
    $(".workspace").html(data);
      alert("Page hasloaded.");
    });
}

answered May 4, 2022 at 18:33

Albert Alberto

97810 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fdomn-m Over a year ago

From the description, OP is recreating the menu without loading the page, hence the use of / attempted use of event delegation. Changing to non-event delegation will be unlikely to work unless OP also changes how/when the events are assigned, which your answer don't mention.

Albert Alberto Over a year ago

Have you defined "$nav_menu"? It is not appearing anywhere.

Albert Alberto Over a year ago

You have not also defined $btn_websites, $btn_contacts, and $btn_finance in your code. Please edit and include all your code.

fnostro · Accepted Answer · 2022-05-04 18:55:30Z

// assuming the following...

const $nav_menu = $("nav.menubar");
const $btn_websites = ".btn.websites";
const $btn_contacts = ".btn.contacts";
const $btn_finance = ".btn.finance";

const $workspace = $("div.workspace");

$($nav_menu).on('click', $btn_websites, (event) => {
  console.log("Load Websites");
  $workspace.html(event.target.textContent);
})

$($nav_menu).on('click', $btn_contacts, (event) => {
  console.log("Load Contacts");
  $workspace.html(event.target.textContent);
})

$($nav_menu).on('click', $btn_finance, (event) => {
  console.log("Load Finance");
  $workspace.html(event.target.textContent);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global">

  <nav class='menubar'>
    <button class='btn websites'>Websites</button>
    <button class='btn contacts'>Contacts</button>
    <button class='btn finance'>Finance</button>
  </nav>

  <div class="workspace">
  </div>
</div>

Collectives™ on Stack Overflow

Why do all javascript functions execute when I click on only one?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related