Adding function to onclick attribute weird behaviour

Question

I'm having a strange issue adding the "ExecuteDelete(index)" function to an onclick attribute. The basic logic here is that when a user clicks delete, it triggers the Remove(index) function which shows a modal window and adds an onclick attribute to the Confirm Delete button on the modal. That confirm delete buttons onclick is supposed to execute after the Confirm Delete button has been clicked in the modal window.

This will work and the alert will be displayed after the user clicks the confirm delete button...

function Remove(index){
            //set delete food modal message.
            $("#DeleteFoodMessage").text("Are you sure you want to delete " + $("#FoodName-" + index).val());

            //show modal.
            $("#ConfirmDelete").modal();

            //add onclick= event to the modal to delete the element at 'index'.
            document.getElementById('ExecuteDeleteButton').onclick = ExecuteDelete;


        }

            function ExecuteDelete(index){

            alert("This works");
        }

However, when trying to pass in the parameter for the index, so that ExecuteDelete() knows what it's about to delete, the alert is called when the Remove() function is called.

    function Remove(index){
            //set delete food modal message.
            $("#DeleteFoodMessage").text("Are you sure you want to delete " + $("#FoodName-" + index).val());

            //show modal.
            $("#ConfirmDelete").modal();

            //add onclick= event to the modal to delete the element at 'index'.
            document.getElementById('ExecuteDeleteButton').onclick = ExecuteDelete(index);


        }

            function ExecuteDelete(index){

            alert("This does not work");
        }

Thanks for the help.

-Andrew

because you are calling the function and whatever is being returned by the funciton is being added to the event listener. You are basically doing ExecuteDelete(index); document.getElementById('ExecuteDeleteButton').onclick = undefined — epascarello
– epascarello, Commented Mar 20, 2018 at 16:37
You have to assign a function reference as stated in the documentation. You can use Function.prototype.bind method so that the Remove function gets the right index to process. — Stphane
– Stphane, Commented Mar 20, 2018 at 16:39

eltomato · Accepted Answer · 2018-03-20 16:44:52Z

1

Instead of the ...onclick = ExecuteDelete(index); you should use jquery bind like

$('#ExecuteDeleteButton')
    .off('click')
    .on('click', function() { 
        ExecuteDelete(index);
    }
);

Dont forget the off() to unbind from your reused delete button!

edited Mar 20, 2018 at 16:44

answered Mar 20, 2018 at 16:39

eltomato

8910 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ele · Accepted Answer · 2018-03-20 16:42:03Z

0

You're executing the function just right on the assignment.

Bind that event click using the function addEventListener:

document.getElementById('ExecuteDeleteButton').addEventListener('click', 
    function() {
        ExecuteDelete(index);
    }
});

answered Mar 20, 2018 at 16:42

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Collectives™ on Stack Overflow

Adding function to onclick attribute weird behaviour

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related