75568

Override parrents onClick event with checkbox onClick?

First, sorry for my bad English.

I'm making a Coupons site and have trouble with selecting and deselecting the coupons. Each coupon is in a DIV 'box' in which there is a checkbox.

I made a onClick function on the DIV box (so the user can select the coupon by clicking on anything inside the DIV box. What I need now is, when the user want to deselect the coupon (by clicking on the checkbox inside the DIV box), I need to 'override' the DIV's onClick function (execute the checkbox onClick event, not the DIV's onClick event).

I know that everyone prefers some code as an example, but the question/problem is simple and I don't think you need all of my un'useless code inside the events/functions :)

Thanks :)

Answer1:

It seems like you want stopPropagation if the checkbox is being unchecked: http://jsfiddle.net/8Dcq8/.

$("div").click(function() { alert("add"); // clicking anywhere in div to add coupon }); $(":checkbox").click(function(e) { if(!this.checked) { // if unchecking, remove coupon alert("remove"); e.stopPropagation(); // don't run parent onclick } });

Answer2:

If the <div> click handler looks something like this:

var $boxes = $('div.box'); $boxes.on('click', function () { // do whatever to select the coupon });

Then the checkbox handler should look something like this:

$boxes.find('input[type="checkbox"]').on('click', function (event) { event.stopPropagation(); // do whatever to deselect the coupon });

See event.stopPropagation().

Answer3:

You have to cancel bubbling. See here for an explanation.

Answer4:

You can use the jQuery Alternative, or create sub-elements with onClicks that don't target your checkbox. you might be able to use something like this also.

document.getElementById('element').checked.onreadystatechange=function(){ //code }

good luck

Recommend

  • Maven: How to read the Parent POM version
  • Calling overrided virtual function instead of overloaded
  • UICollectionView deselectItem when cell pre-fetching is enabled
  • jquery select nested div
  • Get all text between tags with preg_match_all() or better function?
  • Problem modifying UITableViewCell accessoryType in tableView:didSelectRowAtIndexPath:
  • Sometimes strange artifact appears when [mapView selectAnnotation];
  • ReferenceError: Error #1069: Property box_mc_0
  • Setting jsp checkbox with a value from database
  • F# deleting common elements in lists
  • Windows/C# system-level sequential number generator?
  • how can resolve dodgy:unchecked/unconfirmed cast in sonar?
  • Hide buttons on title bar in Java
  • Security issues with PHP's Readfile method
  • Keep this build forever option - Jenkins
  • onBackPressed() not being executed
  • d3 v4 drag and drop with TypeScript
  • JQuery Internet Explorer and ajaxstop
  • Ajax Loaded meta Tags
  • Xamarin Forms - UWP Fonts
  • Update CALayer sublayers immediately
  • JFileChooser in front of fullscreen Swing application
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Join two tables and save into third-sql
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • How to model a transition system with SPIN
  • To display the title for the current loaction in map in iphone
  • ORA-29908: missing primary invocation for ancillary operator
  • Delete MySQLi record without showing the id in the URL
  • Arrays break string types in Julia
  • Acquiring multiple attributes from .xml file in c#
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Linking SubReports Without LinkChild/LinkMaster
  • How can I remove ASP.NET Designer.cs files?
  • unknown Exception android
  • Programmatically clearing map cache
  • failed to connect to specific WiFi in android programmatically
  • Converting MP3 duration time
  • java string with new operator and a literal