The action is triggered more than once at a second load

Question

PROBLEM

I have a modal that I use the application extensively. This modal content and confirmation of action changes depending on what is pressed.

The first time this modal launch starts, everything is fine, and the dandy and the modal confirm only fires once.

At any other time, the modal action is triggered 3 times.

MY CODE

Modal and button on my HTML page:

<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>

And my Javascript (well, actually, 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 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();
}

I created a script that replicates this behavior .

Question

How can I prevent the trigger action of confirmation?

Answer 1

, removePageListeners.

function removePageListeners() {
    $('[data-action]').each(function() {
        var theEvent = $(this).data('event');

        $(this).off(theEvent);
    });
}

, .

.

Answer 2

setEventListeners() , showModal.

setEventListeners

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

. n . n , .

;

setEventListeners() showModal()