Question

我遇到一个奇怪的问题，将“ExecuteDelete（index）”函数添加到onclick属性中。这里的基本逻辑是，当用户单击删除时，它会触发Remove（index）函数，该函数显示模态窗口并将onclick属性添加到模态上的Confirm Delete按钮。确认删除按钮onclick应该在模态窗口中单击确认删除按钮后执行。

这将起作用，并在用户点击确认删除按钮后显示警告...

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");
        }

但是，当尝试传入索引的参数时，ExecuteDelete（）知道它要删除的内容，调用Remove（）函数时会调用警报。

    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");
        }

感谢您的帮助。

-Andrew

Answer 1

而不是...onclick = ExecuteDelete(index);，你应该使用像

这样的jquery绑定

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

请勿忘记off()取消绑定您重复使用的删除按钮！

Answer 2

您正在执行任务时正好执行该功能。

使用 addEventListener 函数绑定该事件click：

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

将函数添加到onclick属性奇怪的行为

2 个答案: