Geek Answers Handbook

The onclick child html event is blocked. how to win

Possible duplicate:
Parent Handler Prevention

I need to attach functions to onclick events of hierarchical divs.

I have this HTML

<div onclick="event1()" class="wrapper"> main contents <div onclick="event2()"class="inner"> inner contents </div> </div>

now when i click on the inner div event1() and event2 () is not being called because i think my jquery plugin is blocking it.

Edited ::

in fact my plugin blocks node child events, so event2 () is never called, how can I stop this?

I am using jquery full callender plugin: http://arshaw.com/fullcalendar/
and below is my config function, which is called onready.

 function calenderEvents(events, account_id) { //Dynamically Set options as account type wise var selectable_opt = ''; if (account_id == 'default') { selectable_opt = true; } else { selectable_opt = false; } var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: selectable_opt, selectHelper: true, eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) { AfterMove(event); }, select: function(start, end, allDay) { var title = prompt('Event Title:'); if (title) { var details = { title: title, start: start, end: end, allDay: allDay }; $.post(SITE_URL + '/calendar/add-event', { details: details }, function() { }); calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay, }, true // make the event "stick" ); } calendar.fullCalendar('unselect'); }, /*eventMouseover: function() { $('.fc-event-delete').css('display','block'); }, eventMouseout: function() { $('.fc-event-delete').css('display','none'); },*/ editable: true, events: events, }); //}).limitEvents(2); }
+6
source share
4 answers

You can add an event handler to the container element and provide a selector so that only events triggered by elements that match this selector will call the handler. Since the handler is bound to the containing element, child elements added to the DOM later will call the handler if they match the selector.

http://api.jquery.com/on/

This code will create an event handler that will be fired on new elements added to the div#wrapper element. The #adder click #adder will add new elements to the shell.

HTML

 <div id="adder">click to add elements</div> <div class="wrapper"> contents: <div class="inner">0</div> </div>​

Js

 var $inner = $('.inner').first(), $wrapper = $('.wrapper'), count = 0; $wrapper.on('click', '.inner', function(e) { alert('click from ' + $(this).text()); }); $('#adder').on('click', function() { $wrapper.append($inner.clone().text(++count)); });

The main .inner is to use the .inner selector when the click event handler is added to $wrapper .

Shown in jsFiddle .

+1
source

You need to stop the event from spreading to the parent. Use event.stopPropagation();

 $(".inner").click(function(event){ //do something event.stopPropagation(); });
+1
source

This effect is the propagation of a call event. The internal click handler should be such as to prevent distribution:

 var event2 = function(event) { event = event || window.event; if (event.stopPropagation) { // for adequate browsers event.stopPropagation() } else { // for IE event.cancelBubble = true } }

demo - http://jsfiddle.net/Qw92P/

0
source

Just use the event with one click on the wrapper, but make it live. Determine if the click was actually a child using targetElement (or is it srcElement - you can find this part).

0
source

More articles:


All Articles