Click event not executed on bootstrap dropdown list item link click

Question

I have multiple dropdowns (more than 10), and my click method never executes... Is it possible to define same click method to all dropdown elements like I have done below?

JS

<link rel="stylesheet" href="Scripts/bootstrap/css/bootstrap.min.css" />
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {

        $(".dropdown-menu li a").click(function () {

            console.log("inside"); //this never executes...

            var type = $(this).data("type");
            var nick = $(this).data("nickname");

            if (type == "1") {
                $('#chat_text').val('!tip ' + nick + ' ').focus();
            }
            else if (type == "2") {

            }
            else if (type == "3") {
                var val = $('#chat_text').val();
                $('#chat_text').val(val + nick ).focus();
            }
        });
    });
</script>

HTML

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Test1</a>
   <ul class="dropdown-menu" role="menu"> 
   <li><a href="#" data-type="1" data-nickname="Test1">Tip</a></li> 
   <li><a href="#" data-type="2" data-nickname="Test1">Show</a></li> 
   <li><a href="#" data-type="3" data-nickname="Test1">Paste</a></li> 
   </ul> 
   <span>Some text</span>
</li>

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Test2</a>
   <ul class="dropdown-menu" role="menu"> 
   <li><a href="#" data-type="1" data-nickname="Test2">Tip</a></li> 
   <li><a href="#" data-type="2" data-nickname="Test2">Show</a></li> 
   <li><a href="#" data-type="3" data-nickname="Test2">Paste</a></li> 
   </ul> 
   <span>Some text</span>
</li>

More of this dropdowns are in real code....

*EDIT: I forgot to mention that I add these dropdowns dynamically after the page is created (AJAX calls....)

nickname must be nick ! you might be getting reference error for the same — Dhaval Marthak
– Dhaval Marthak, Commented Jun 3, 2015 at 9:21

Wa Kai · Accepted Answer · 2015-06-03 10:22:09Z

6

If you add them dynamicly, try this:

$("body").on('click', '.dropdown-menu li a', function () {

Instead of

$(".dropdown-menu li a").click(function () {

With this change the click handler will be there for every anchor element within the dropdown-menu class, no matter when it will be created.

answered Jun 3, 2015 at 10:22

Wa Kai

4665 silver badges12 bronze badges

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

Comments

Avinash · Accepted Answer · 2015-06-03 10:21:30Z

0

As your content are being downloaded using AJAX calls, you need to implement Event Delegation. Good article is here.

answered Jun 3, 2015 at 10:21

Avinash

6,20415 gold badges65 silver badges95 bronze badges

Collectives™ on Stack Overflow

Click event not executed on bootstrap dropdown list item link click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related