triggering button click event in table row with mouseup event

Question

I am using the jQuery fullCalendar plugin.

I have an event behind the select attribute of the calendar:

 $("#calendar").fullCalendar({
       select: function(start,end,jsEvent,view){
                  doSomething();
               }
 });

The event behind the select attribute is the mouseup event for the entire day cell of the calendar.

I am trying to place a button inside a day cell of the calendar, but am not able to get the click event of the button to fire.

I have read the various submissions in stackoverflow on bubbling, but none of these solutions have worked:

  $("#testbutton").click(function(e){
        e.stopPropagation();
        doSomethingElse();
  });

Even if I remove the select attribute from the fullcalendar and all associated code (which causes the day cell to be highlighted but no event to fire), the click event of the button still will not fire.

Any thoughts?

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Because the button is being added dynamically your current jQuery registration will not bind. If you use the "on" event binding, it will work with dynamic elements. Try something like the following:

//Replace ".dynamic-button-class" with a target that points to your button.
$(document).on("click", ".dynamic-button-class", function(e) {
    e.preventDefault();
    doSomething();
});

The "on" syntax binds to all future DOM elements matching the pattern as well as the elements that are present at render.

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

and here: Event binding on dynamically created elements?

You'll also want to avoid duplicate event registrations. By binding an event within another, you will re-bind the event every time the parent event is triggered, which is probably not what you want.

Instead, consider a solution like this:

//This method is registered once for all buttons with a "dynamic-button" class attribute and is triggered for each one clicked.
$(document).on("click", ".dynamic-button", function(e) {
    //Load the values stored in the hidden fields.
    var formStartDate = $(e.currentTarget).closest("input[name='StartDate']").val();
    //etc...
    $(document).trigger("calendar-button-clicked", {StartDate: formStartDate}); // Pass the form arguments as a JavaScript object to the calendar-button-clicked event hander
});

$(document).bind("calendar-button-clicked", function(e, data) {
    //Do something with the values in data.
});

//Single event triggered when a calendar selection is made
$(document).bind("add-button", function(e, data) {
    //Code that adds your button to the page here but also checks to see if the button has already been added.
    //persist the values from Data into some kind of form hidden form fields.
    console.log(data.StartDate);
});

$("#calendar").fullCalendar({
    select: function(start, end, jsEvent, view){
        $(document).trigger("add-button", {StartDate: start, EndDate: end, SourceEvent: jsEvent, View: view});
    }
});

EDIT: Here is a quick fiddle i set up that works and demonstrates the concept.

http://jsfiddle.net/xDaevax/5282Q/

score 0 · Answer 2 · edited Jul 28 '14 at 14:31

0

try

 $("#testbutton").click(function(e){
    e.preventDefault();
    doSomethingElse();
});

edited Jul 28 '14 at 14:31

SchmitzIT

9,227
9
65
92

answered Jul 28 '14 at 14:13

dannyde

122
4

Thanks for your response. This is having no effect. – RickInWestPalmBeach Jul 28 '14 at 14:18

triggering button click event in table row with mouseup event

2 Answers2