javascript - Action 在第二次加载时触发不止一次

Question

问题

我有一个在应用程序范围内使用的模式。此模式的内容和确认操作会根据点击的内容而变化。

第一次启动这个模态时，一切都很好，花花公子，模态的确认只触发一次。

其他任何时间，模态框都会触发 3 次确认操作。

我的代码

我的 HTML 页面中的模式和按钮:

<div class="modal fade" tabindex="-1" role="dialog" id="confirmationModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button class="btn btn-danger" data-event="click" data-action="closeModal">Cancel</button>
                <button class="btn btn-success" data-event="click">Confirm</button>
            </div>
        </div>
    </div>
</div>
<i class="fa fa-trash linked-fa red-fa" data-confirm="temDelete" data-event="click" data-id="template" data-header="Confirm Delete" data-body="Are you sure you want to delete Template?" data-action="showModal"></i>

还有我的 Javascript(实际上是 JQuery)

$(document).ready(function(e) {
    setEventListeners();
});

function setEventListeners() {
    // Find all elements with a data-action attribute
    $('[data-action]').each(function() {

        // Set the callback to the action
        // Link the event to the callback
        var theCallback = $(this).data('action');
        var theEvent = $(this).data('event');

        // If theEvent == 'load', do it immediately
        if(theEvent == 'load') {
            executeFunctionByName(theCallback,this,$(this));
        } else {
            // When the event fires, do the callback
            $(this).on(theEvent,function(e) {
                executeFunctionByName(theCallback,window,$(this),e)
            });
        }
    });
}

function executeFunctionByName(functionName,context) {
    // I actually have no freakin idea what this does

    // Google made me copy paste it.
    var args = [].slice.call(arguments).splice(2);
    var namespaces = functionName.split(".");
    var func = namespaces.pop();

    for(var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
    }

    if(typeof context[func] !== 'undefined') {
        return context[func].apply(this, args);
    } else {
        console.log('Function not found.');
    }
}

function showModal(element) {

    // Get and set the body and header of the modal
    $('#confirmationModal .modal-header').html(element.data('header'));
    $('#confirmationModal .modal-body').html(element.data('body'));

    // Transfer all data fields from the clicked element to the confirm button in the Modal
    $.each(element.data(),function(i,v) {
        if(i != 'event') {
            if(i == 'confirm') { i = 'action'; } // If the data is confirm, change it to action, as this is the modal's action
            $('#confirmationModal .modal-footer .btn-success').attr('data-' + i,v);
        }
    });

    setEventListeners();
    // Set the page listeners and show the modal
    $('#confirmationModal').modal('show');
}

function closeModal() {
    $('#confirmationModal').modal('hide');
}

function temDelete() {
    $('.actionsfired').append('Delete Fired<br>');
    closeModal();
}

我创建了一个 fiddle that replicates this behaviour .

问题

如何防止确认操作被触发 3 次？

Answer 1

你打电话 每次调用 showModal 时都使用 setEventListeners() 方法。

在setEventListeners方法中

$(this).on(theEvent,function(e) {
     executeFunctionByName(theCallback,window,$(this),e)
});

这一行一次又一次地注册事件。如果你注册了一个事件的回调 n 次。一个事件发生时回调n次。

为了快速解决；

从 showModal() 中删除 setEventListeners() 方法调用