Click function on div inside div with click function

Question

So I wanted to know how you could stop the outer divs click function, and only have the inner divs click function be triggered. But, I want to stay using the $(document).on('click',selector) method for use in my application. I have see a few answers, but none that work with that method. Maybe An oversight by me?

$(document).ready(function() {
  $('.Name').text('A veery long namemmmmmmeehhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhheeeee');
  $(document).on("click", ".task", function() {

    alert("click");
  });
  $(document).on("click", ".Name", function() {

    alert("click");
  });
});

.one {
  height: 495px;
  flex-basis: 50%;
  max-width: 50%;
  min-width: 35%;
  position: relative;
  top: 20px;
  margin-right: 20px;
  margin-left: 10px;
  outline: solid red 1px;
}

.two {
  height: 210px;
  top: 20px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  flex-basis: 50%;
  max-width: 50%;
  min-width: 15%;
  outline: solid red 1px;
}

.flex {
  height: 100%;
  width: 100%;
  display: flex;
}

.Box {
  cursor: pointer;
  width: 85%;
  padding-left: 8px;
}

.Name {
  margin: 0px;
  width: 85%;
  max-height: 25px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Date {
  margin: 0px;
}

.task {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background-color: white;
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
}

.Details {
  position: relative;
  top: 10%;
  display: inline-block;
  margin-left: 15px;
  width: 85%;
}

.three {
  height: 210px;
  top: 20px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  flex-basis: 50%;
  max-width: 50%;
  min-width: 35%;
  outline: solid red 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">

  <div class="one">
    one
    <div class="task task-container" data-type="yes">
      <div class="Details">
        <div class="Box">
          <p class="Name">A very long nameeeeeeeeeeeeeeeeeeeeeeeeeeeeemmmmmmmmmmmmmmmmee</p>
          <p class="Date">Due: 4/10/2018</p>
        </div>
      </div>
    </div>
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
    <div class="task task-container" data-type="yes">
      <div class="Details">
        <div class="Box">
          <p class="Name"></p>
          <p class="Date">Due: 4/10/2018</p>
        </div>
      </div>
    </div>
  </div>
</div>

LINK- https://jsfiddle.net/t29ffzan/35/

Why do you have them nested like this? Just separate them and you won't have this problem. — jmargolisvt
– jmargolisvt, Commented May 23, 2018 at 19:44
Its a div with multiple functionalities. Both need to have click functions. THat doesn't apply. @jmargolisvt — Will
– Will, Commented May 23, 2018 at 19:46
In the future, please make sure you include at least the HTML along with the JavaScript in the question itself so that people can see what the problem is without having to go to jsfiddle.net (which is often blocked by corporations). — Heretic Monkey
– Heretic Monkey, Commented May 23, 2018 at 19:52

Tom Con · Accepted Answer · 2018-05-23 19:55:56Z

3

First you need to capture the event within the function call: function(event) {} Next you call a function to stopPropagation within the function, like so:

$(document).on("click", ".Name", function(event) {
    event.stopPropagation()
    alert("click");
});

docs

edited May 23, 2018 at 19:55

answered May 23, 2018 at 19:46

Tom Con

6307 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kit Isaev · Accepted Answer · 2018-05-23 19:45:59Z

0

In your second event handler, do the following:

$(document).on("click", ".Name", function(e) {
  e.stopPropagation();
  alert("click");
});

It will prevent the event from bubbling, i.e. being also called on parent tags. Look here for moar info: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

answered May 23, 2018 at 19:45

Kit Isaev

7108 silver badges19 bronze badges

Comments

yezzz · Accepted Answer · 2018-05-23 19:49:41Z

0

In the click handler for the inner element, stop the click from propagating outward (bubbling up).

  $(document).on("click", ".task", function() {
    alert("click");
  });
  $(document).on("click", ".Name", function(e) {
    e.stopPropagation();
    alert("click");
  });

https://jsfiddle.net/t29ffzan/36/

answered May 23, 2018 at 19:49

yezzz

3,0381 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

Click function on div inside div with click function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related