Jquery 带引导模式的嵌套可单击div

我正在使用带嵌套div的引导模式插件。单击内部div时，我想显示编辑表单，单击容器div时，我想显示添加新表单。请参阅下面的代码

<div id="container" style="width:300px;height:300px;border-style:double;cursor:pointer;" data-target="#add" data-toggle="modal">
    <div id="inside" data-target="#edit" data-toggle="modal" style="width:180px; height: 180px; background-color: Aqua; cursor: pointer;">
        click here to edit
    </div>
    click outside to add
</div>

<!-- Modal for edit -->
<div class="modal fade" id="edit" 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">EDIT</h4>
      </div>
      <div class="modal-body">
        (form for edit)
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">UPDATE</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal for add -->
<div class="modal fade" id="add" 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">ADD NEW</h4>
      </div>
      <div class="modal-body">
        (form for add new)
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">ADD</button>
      </div>
    </div>
  </div>
</div>

---

问题是，当单击内部div时，将弹出编辑表单和添加新表单。如果add onclick=event.stopPropagation；在inside div中，它将停止弹出这两个窗体

我想出了一个解决办法

    $("#inside").click(function(){
        $("#inside").parent().addClass("no_click");
    });

    $("#container").click(function(event){
        if($(this).hasClass("no_click")){
            $(this).attr("data-toggle","");
            $(this).removeClass("no_click");
            return;
        }
        else{
            $(this).attr("data-toggle","modal");
        }
    });

---

这个想法来自这篇文章。那篇文章中的问题和我的问题都是关于一个动作触发两个事件

你能做一把小提琴吗？实际上有一个更简单的解决方案，不是通过HTML属性激活模态，模态也可以通过JavaScript激活。然后onclick=event.stopPropagation；应该可以。