Bootstrap Modal not working inside dropdown list

Question

This is the code that I'm using. This is working fine in codepen but not in my local site. When I open a modal outside the dropdown menu then its fine but not inside the dropdownmenu.

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu ul-drp" role="menu">

<li class="li-drp"><a href="#" data-toggle="modal" data-target="#myModal"> Edit</a></li>
  <li class="li-drp"><a href="#"> Delete</a></li>
  </ul>
</div>

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
    ...
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

I'm using this js code for other dropdown menu to stay active

<script>
    $('.dropdown-menu').click(function (event) {
        event.stopPropagation();
    });
</script>

If I remove this code then its working fine but I want this dropdown to stay active and open a modal.

Answer 1

Ok as per your inputs I read from your comments above I would assume that there will a textbox in dropdown menu and you do not want to close dropdown when that particular textbox is clicked and so the below code works.

$('.dropdown-menu li').click(function (event) {
     var children=$(this).children("input[type=text]");
     if(children.length!=0)
     {
         alert('found');
         event.stopPropagation();
     }
});

Here is the DEMO