模态打开时，Bootstrap模态对话框按钮单击事件触发

Question

我正在开发一个应用程序并且需要打开一个modal，让用户填写一些细节并在他们点击我指定的模态按钮后保存它们。我使用jQuery on绑定了按钮的click事件。问题是当模态打开时触发click事件。

模态的相关部分：

<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary" id="save-event">Save Event</a>

我绑定事件的地方：

$('#save-event').on(
'click',
function(evt)
{
    console.log('triggered');
}
);

当我打开对话框时，控制台显示“已触发”。我通过以下方式打开对话框：

<a href="#add-event-modal" role="button" class="btn" data-toggle="modal">{% trans "Event also occurs on" %}</a>

它是一个Django应用程序，所以花括号。任何想法我可能做错了，或者在用户点击相关按钮后还有另一种方法来执行某些逻辑吗？

Answer 1

您可能在html中有2个具有相同ID的元素，并且当您单击其他元素时，您将触发事件。

Answer 2

尝试将以下内容添加到jQuery代码中：

evt.stopPropagation();

很抱歉，应该澄清一下，将其添加到触发模态打开的代码中。

编辑，因为您无法直接访问模式代码，请在jQuery中尝试以下操作：

$('#add-event-modal').on('click', function(evt) {
    evt.stopPropagation();
});