how to set click event on parent using jquery?

Question

Following is the HTML structure I'm using

<div id="divid">
   <table>
     <tr>
       <td onclick="var ele = document.getElementById('inputID'); ele.click();">
          <input id="inputID" onclick="event.stopPropagation();"  name="nameOfElement" type="checkbox"/>
       </td>
     </tr>
    </table>
</div>

I'm trying to set a click event on element using JQuery as follows:( for other functionality elsewhere in page)

 $("#inputID").parent().on('click',function(){ // call to other functions})

this attachment leads to following error:

  Uncaught Error: Syntax error, unrecognized expression: )

I have to give following functionality:

If user click on td then input element must be checked and if clicked on then click event must not be propagated to parent i.e. td as that will reverse the effect.
Also I want to Jquery's click event to execute.

Currently, only first functionality is working and event.stopPropagation() is stoping the second one.

how can I achieve both of them?

please have a look at http://jsfiddle.net/zqg0Lgbh/4/ for demo of issue.

I don't understand the question. And it's been a very long time since live deprecation (and removal). — Denys Séguret
– Denys Séguret, Commented Dec 16, 2014 at 8:36
api.jquery.com/live live() is long deprecated, check for yourself — trainoasis
– trainoasis, Commented Dec 16, 2014 at 8:37
@dystroy I edited Question and include a demo on fiddle, have a look now — Arvind Bishnoi
– Arvind Bishnoi, Commented Dec 16, 2014 at 9:35

trainoasis · Accepted Answer · 2014-12-16 10:14:12Z

3

Use on() instead of live() since live() is long deprecated

$("#inputID").parent().on('click',function(){

Also, it's not a good idea to use

<td onclick="var ele = document.getElementById('inputID'); ele.click();"

Instead create on click event in JS like shown above. (and add class or id to your td element so you can attacht click event to it ofcourse). If you must call onclick from HTML, then perhaps try

onclick="javascript:var ele = document.getElementById('inputID'); ele.click();"

That sometimes helps if you are not sure the code is being executed. Also try to alert() something to make sure the code actually executes.

Also you have a syntax error in your code. (onlcick instead of onclick)

<input id="inputID" onlcick="event.stopPropagation();"

edited Dec 16, 2014 at 10:14

answered Dec 16, 2014 at 8:38

trainoasis

6,79912 gold badges55 silver badges84 bronze badges

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

7 Comments

Arvind Bishnoi Over a year ago

Call to click event never comes!

Arvind Bishnoi Over a year ago

that Jquery click event which I'm attaching to parent of input element for controlling show/hide other elements in page.

Arvind Bishnoi Over a year ago

I did tried to put alert() there but I got error (please look in question Itself).

trainoasis Over a year ago

The event that you add to parent inline, or the one that is added in JS?

Arvind Bishnoi Over a year ago

Can anyone tell me from where that extra ")" comes into picture??

|

Denys Séguret · Accepted Answer · 2014-12-16 10:05:24Z

0

First, I would remove all those ugly inline event handlers.

Then, I would use jQuery to ensure a click on a cell containing a radio button checks that radio button :

$('td:has(>input[type=radio])').click(function(){
   $('input[type=radio]', this).prop('checked', true);
});

This way you don't have to use stopPropagation.

Demonstration (note that I fixed a few other things, like using fixing the missing name in the function declaration or importing jQuery.

Asides:

you really should stop using inline styles and inline event handlers. This code isn't maintainable.
changing the behavior of widgets and their surroundings isn't really a best practice as it surprises the user and leads to various ergonomics problem

edited Dec 16, 2014 at 10:05

answered Dec 16, 2014 at 10:00

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

Arvind Bishnoi Over a year ago

i totally agree with you, but this decision is not mine. That Inline code is legacy I got and no one is willing change approach.

Denys Séguret Over a year ago

Then just remove all those event handlers just before your code : $('.Pointer').each(function(){ this.onclick=null });

Balachandran · Accepted Answer · 2014-12-16 08:38:55Z

0

Remove inline handler

$("#inputID").click(function () {

    if (this.checked) {
        alert("call other function")
    }

});

answered Dec 16, 2014 at 8:38

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

6 Comments

Arvind Bishnoi Over a year ago

If I remove inline handler then what about First functionality. Also Call to click event never comes!

Balachandran Over a year ago

why you call click event , you can call this other function inside this checked

Arvind Bishnoi Over a year ago

I have to some show/hide thing elsewhere in page which depends upon this answer.

Balachandran Over a year ago

Then you can use your function depends on this.checked

Arvind Bishnoi Over a year ago

I'm not able to follow, can you please elaborate?

|

Harko · Accepted Answer · 2014-12-16 09:31:28Z

0

This works:

$("#inputID").parent().on("click", function(){
    alert("Trigger other events");
});

Here's a fiddle

http://jsfiddle.net/vkewuu6L/

If you look at the fiddle the border represents the parent of "#inputID". You can click on the border to trigger the alert.

edited Dec 16, 2014 at 9:31

answered Dec 16, 2014 at 9:18

Harko

4134 silver badges14 bronze badges

Collectives™ on Stack Overflow

how to set click event on parent using jquery?

4 Answers 4

7 Comments

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related