Question

I have the following markup:

<div style="height:100px; width:280px; float:left" >

<p style="float:left; padding:5px;" id="optionOne">

<label style="cursor:pointer; width:100px" id="optionLabelOne">Option 1</label>
<span style="color:red; font-size:10px"></span>

<input class="u-3" name="ageGroup" id="ageGroup" style="width:230px;" />
</p>

 </div>

I have several such repeating divs. I select

tags inside them like this:

$('#optionOne,#optionTwo,#optionThree,#optionFour').on('mouseover',function(){
 $(this).on('mouseover',function(){
  //do something here});
  });

Now at some later stage i need to execute a click event on “p” tag excluding the “input” tag that lies within.

When i use the below code, click event fires up on input field as well (obvious)

$(this).on('click',function(){
//do something
});

So what can be done to select the complete p tag without doing anything to input element within.

I tried this as well:

$(this).not('input').on('click',function(){
 //// NOT WORKING
 });

Please comment.

Answer 1

You can use stopPropagation method of the event object:

$('p input').on('click', function(event){
     event.stopPropagation()
})

Note that there is no need to bind a handler to this object as you have selected all the elements:

$('#optionOne,#optionTwo,#optionThree,#optionFour').on('mouseover',function(){
    // 
});

You can also add a class to the p tag and use class selector:

$('p.options').on('mouseover',function(){
    // $(this).foo()
});