Javascript 触发按钮单击表行中带有mouseup事件的事件

Javascript 触发按钮单击表行中带有mouseup事件的事件,javascript,jquery,fullcalendar,Javascript,Jquery,Fullcalendar,我正在使用jQuery fullCalendar插件 我在日历的select属性后面有一个事件: $("#calendar").fullCalendar({ select: function(start,end,jsEvent,view){ doSomething(); } }); select属性后面的事件是日历全天单元格的mouseup事件 我试图将一个按钮放置在日历的day单元格中,但无法启动按钮的cli

我正在使用jQuery fullCalendar插件

我在日历的select属性后面有一个事件:

 $("#calendar").fullCalendar({
       select: function(start,end,jsEvent,view){
                  doSomething();
               }
 });
select属性后面的事件是日历全天单元格的mouseup事件

我试图将一个按钮放置在日历的day单元格中,但无法启动按钮的click事件

我已经阅读了stackoverflow中关于冒泡的各种意见,但这些解决方案都不起作用:

  $("#testbutton").click(function(e){
        e.stopPropagation();
        doSomethingElse();
  });
即使我从fullcalendar和所有相关代码中删除了select属性(这会使day单元格高亮显示,但不会触发任何事件),按钮的click事件仍然不会触发

有什么想法吗?

试试看

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

因为按钮是动态添加的,所以当前jQuery注册将不会绑定。如果使用“on”事件绑定,它将与动态元素一起工作。请尝试以下操作:

//Replace ".dynamic-button-class" with a target that points to your button.
$(document).on("click", ".dynamic-button-class", function(e) {
    e.preventDefault();
    doSomething();
});
“on”语法绑定到与模式匹配的所有未来DOM元素以及呈现时存在的元素

请看这里:

在这里:

您还需要避免重复的事件注册。通过在另一个事件中绑定一个事件,您将在每次触发父事件时重新绑定该事件,这可能不是您想要的

请考虑这样的解决方案:

//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});
    }
});
编辑:这里是我设置的一个快速小提琴,它可以工作并演示这个概念。


感谢您的回复。这是没有效果的。