Question

我使用带有嵌套div的bootstrap MODAL插件（http://getbootstrap.com/javascript/#modals）。当单击内部div时，我想显示EDIT表单，当单击容器div时，我想显示ADD NEW表单。请参阅下面的代码。

<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时，将弹出编辑表单和添加新表单。如果在内部div中添加onclick="event.stopPropagation();"，则会停止弹出两个表单。

Answer 1

我找到了一个解决方案

    $("#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");
        }
    });

这个想法来自这篇文章Preventing click event with jQuery drag and drop。该帖子和我的问题中的问题都是关于一个动作触发两个事件。

带引导模式的嵌套可点击div

1 个答案: