nested clickable div with bootstrap modal

Question

I'm using bootstrap MODAL plugin (http://getbootstrap.com/javascript/#modals) with nested div. When click the inside div, I want to show the EDIT form, when click the container div, I want to show the ADD NEW form. Please see the code below.

<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>

The problem is, when click the inside div, both edit form and add new form will popup. If add onclick="event.stopPropagation();" in the inside div, it will stop the both two forms being popped up.

Can you make a fiddle? – David Brierton Apr 07 '15 at 01:44 — David Brierton, Apr 07 '15 at 01:44

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

I have came up a solution

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

The idea is come from this post Preventing click event with jQuery drag and drop. The problem in that post and my problem are both about one action trigger two events.

edited May 23 '17 at 12:28

Community

1
1

answered Apr 07 '15 at 04:53

Jun

33
5

Actually there is a easier solution, instead of activate modal via HTML attribute, modal can also being activated by JavaScript (http://getbootstrap.com/javascript/#modals-usage). And then the `onclick="event.stopPropagation();"` should works fine. – Jun Apr 08 '15 at 00:44

nested clickable div with bootstrap modal

1 Answers1