.click event (jQuery) for <li> element in dropdown menu (Bootstrap)

Question

I'm using Bootstrap and I've the following drop down menu:

<span class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Toggle</button>
   <ul class="dropdown-menu" role="menu">
      <li id="one">One</li>
      <li id="two">Two</li>
   </ul>
</span>

I would like to use the .click event of jQuery to check if the first item is being clicked:

$(function () {
   $("#one").click(function() {
      alert("Alert!");
   });
});

Unfortunately that's not working. When the list item is NOT in the dropdown menu it works perfectly.

Thanks for any support in advance!

Answer 1

Just Copy and Check, its Working ..

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#one").click(function(){
            alert("The paragraph was clicked.");
        });
    });
</script>
</head>
<body>

    <span class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Toggle</button>
        <ul class="dropdown-menu" role="menu">
            <li id="one">One</li>
            <li id="two">Two</li>
        </ul>
    </span>
</body>
</html>

DEMO

.click event (jQuery) for <li> element in dropdown menu (Bootstrap)

Question

1 answers

solution1
-1 2015-07-16 08:11:41

.click event (jQuery) for <li> element in dropdown menu (Bootstrap)

Question

1 answers

solution1 -1 2015-07-16 08:11:41

solution1
-1 2015-07-16 08:11:41