How do you execute a function call when clicked on dropdown menu on javascript

Question

I have this menu. When I click on a dropdown item, I need to do something.

<div class="navbar-collapse collapse" style="float:right;">
        <ul class="nav nav-tabs" role="tablist">

          <ul class="nav nav-tabs" role="tablist">
              <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
              <li><a href="#about" role="tab" data-toggle="tab">About</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Applications <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a role="tab" data-toggle="tab"href="#test1">app1</a></li>
                <li><a role="tab" data-toggle="tab"href="#test2">app2</a></li>
                <li><a role="tab" data-toggle="tab"href="#test3">app3</a></li>
                <li><a role="tab" data-toggle="tab" href="#test4">app4</a></li>
                <li><a role="tab" data-toggle="tab"href="#test5">app5</a></li>
              </ul>
            </li>
          </ul>

        </div>

when I pick test1 from the dropdown menu, I need to do something, run a function.

I have done this:

<script>
$('#test1').on('click', function () {
  // do something…
  alert(this.val());
});
</script>

Does not seem to be working, no errors. Any ideas? I'd appreciate any insight.

The selector #test1 is looking for an element with the ID test1, not an href. Change your selector to $("a[href='#test1']").on...., or simply give the a tags an id like <a id="test1".... — entropic
– entropic, Commented Aug 26, 2014 at 20:06

Alex Char · Accepted Answer · 2014-08-26 20:09:48Z

2

You can use the following:

$('a[href*="test1"]').on('click', function () {
  alert($(this).text());
});

The star designates that the proceeding value must appear somewhere in the attribute's value.

fiddle

answered Aug 26, 2014 at 20:09

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

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

Comments

ltalhouarne · Accepted Answer · 2014-08-26 20:07:05Z

2

You are calling an ID that doesn't exist:

<li><a role="tab" data-toggle="tab"href="#test1">app1</a></li>

You need to add an ID:

<li><a id="test1" role="tab" data-toggle="tab"href="#test1">app1</a></li>

answered Aug 26, 2014 at 20:07

ltalhouarne

4,6382 gold badges25 silver badges32 bronze badges

Comments

Fueled By Coffee · Accepted Answer · 2014-08-26 20:15:58Z

1

If you are trying to grab the href="#test". Use the attribute starts with selector. This will grab any element that has an href that begins with '#test':

Also you should change your this reference to $(this) and use text(), not val().

$("a[href^='#test']").on('click', function () {
  // do something…
  alert($(this).text());
});

edited Aug 26, 2014 at 20:15

answered Aug 26, 2014 at 20:09

Fueled By Coffee

2,5797 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

How do you execute a function call when clicked on dropdown menu on javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related