jQuery event propagation does not work as expected

Question

I am trying to propagate events with jQuery using the code below:

$(document).ready(function() {
$('#main').click(function(e){
var el = e.target.nodeName;
var $jObj = $(el);//jQuery object
$jObj.css('color','green');
});
});

This is the simple html code:

<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

Now, If I click on one of the p elements not only the selected p changes the color to green, but all p. I cannot understand the resaon. According to the jQuery script above only the selected <p> should change the colour. What I am doing wrong?

Felix Kling · Accepted Answer · 2015-01-20 14:46:16Z

2

According to the jQuery script above only the selected p

I doubt that. You are selecting all p elements:

var el = e.target.nodeName; // el = "P"
var $jObj = $(el);//jQuery object // equiv to $("p")

e.target.nodeName is the value "P" which you then use as selector, and $("P") selects all p elements.

To only select the event target, pass the DOM element itself to jQuery:

$(e.target)

Relevant documentation: jQuery(element), event.target.

$(document).ready(function() {
$('#main').click(function(e){
var $jObj = $(e.target);//jQuery object
$jObj.css('color','green');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

edited Jan 20, 2015 at 14:46

answered Jan 20, 2015 at 14:38

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Daniel Over a year ago

Hi Felix, thanks for your answer. Now the script is workink properly.

JC Sama · Accepted Answer · 2015-01-20 14:35:19Z

0

Try this out :

 $(document).ready(function() {
      $('#main > p').click(function(e){
         $(this).css('color','green');
      });
    });

answered Jan 20, 2015 at 14:35

JC Sama

2,2041 gold badge14 silver badges13 bronze badges

Comments

Mike Timmerman · Accepted Answer · 2015-01-20 14:42:29Z

0

$(document).ready(function() {
  $('#main').find('p').on('click', function(){
      $(this).css('color','green');    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

edited Jan 20, 2015 at 14:42

answered Jan 20, 2015 at 14:38

Mike Timmerman

1315 bronze badges

Comments

A l w a y s S u n n y · Accepted Answer · 2015-01-20 14:46:54Z

0

Try this way to event delegate using on of JQUERY, when you click on p element, assign this to a variable and then use it as selector object before apply css

$(document).ready(function() 
 {
   $('#main').on('click','p',function(e)
   {
    var el = this;
    var $jObj = $(el);//jQuery object, see here carefully
    $jObj.css('color','green');
   });
 });

See DEMO

edited Jan 20, 2015 at 14:46

answered Jan 20, 2015 at 14:40

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

Collectives™ on Stack Overflow

jQuery event propagation does not work as expected

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related