Question

Possible Duplicate:
Prevent execution of parent event handler

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 inner div event1() is being called, and event2() is not being called because I think my jquery plugin blocks it.

Edited ::

actually my plugin blocks the child node events so event2() is never being called how can i stop that ?

I am using jquery full callender plugin : http://arshaw.com/fullcalendar/
and below is my configuration function which is being called on 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);
}

Answer 1

You can add the event handler to the container element and supply a selector so only events triggered by elements that match that selector will invoke the handler. Because the handler is being attached to the containing element, child elements that are added to the DOM later will still invoke the handler, if they match the selector.

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

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

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 thing is the use of the .inner selector when the click event handler is added to $wrapper.

Shown in this jsFiddle.