Child html element's onclick event is blocked. how to conquer?

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);
}

@FelixKling not actually because my jquery plugim generates html and i need to add some link on each date but I have no control at that time because there is not in DOM when it is being generated, so cant use codes you found simillar. I was just looking for some thing like incresing z-index or any other thing that can do the stuff — Ekta Patel, Dec 28 '12 at 10:43
what plugin? can you share your code with us? jsfiddle would be great. — Ruslan Polutsygan, Dec 28 '12 at 10:52
@RuslanPolutsygan I have used Jquery full callender plugin here is the link for that http://arshaw.com/fullcalendar/ — Ekta Patel, Dec 28 '12 at 10:56
@Ekta: `z-index` is something purely style related, it has to influence on the functionality. If you can attach event handlers to the elements, then you can also stop the event form bubbling up. — Felix Kling, Dec 28 '12 at 11:18

score 1 · Answer 1 · answered Dec 28 '12 at 10:32

1

You need to stop the event being propagated to the parent. Use event.stopPropagation();

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

answered Dec 28 '12 at 10:32

Arvind Bhardwaj

5,231
5
35
49

some how as per my example event2 is not being called at all. ehat can be that – Ekta Patel Dec 28 '12 at 10:49

score 1 · Accepted Answer · answered Dec 28 '12 at 11:05

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.

+1 nearer to my problem. I will see it and if solved my problem will accept your answer. Thank you. — Ekta Patel, Dec 29 '12 at 08:01

Ruslan Polutsygan · Answer 3 · 2012-12-28T10:43:03.773

0

This effect is call event propagation. Inner div click handler has to be just like this to prevent propagation:

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/

edited Dec 28 '12 at 10:43

answered Dec 28 '12 at 10:36

Ruslan Polutsygan

4,401
2
26
37

I have got some thing and updated my question can you pls advice on that – Ekta Patel Dec 28 '12 at 10:48

score 0 · Answer 4 · answered Dec 28 '12 at 11:07

0

Just use one click event on the wrapper but make it "live". Detect if the click was actually on the child using targetElement (or is it srcElement--you can look up this part).

answered Dec 28 '12 at 11:07

ErikE

48,881
23
151
196

Child html element's onclick event is blocked. how to conquer?

4 Answers4