將需要參數的匿名函數傳遞給另一個函數作為將分配給onclick的參數

Question

我有一個功能，我想在整個程序中重用。 基本上它是一個帶有確認和取消按鈕的引導對話框。 我設置了輔助函數來接受兩個匿名函數，一個用於取消，一個用於確認。 我有一切工作，但我不知道如何在構建HTML時正確地將它分配給onclick。 我想避免使用全局變量，但這是我能夠使用它的唯一方法。

自定義功能：

    function confirmMessageBox(msg, cancelFunc, confirmFunc) {
    var html = ' <div class="container"><div class="modal fade" id="ConfirmMsgModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Confirmation Needed</h4></div><div class="locationTableCanvas"><div class="modal-body"><p>' + msg + '</p></div></div><div class="modal-footer"><table><tr><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "(' + cancelFunc + ')()">Cancel</button></td><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "(' + confirmFunc + ')()">Confirm</button></td></tr></table></div></div></div></div></div>';
    $("#confirmMsgContainer").html(html);
    $('#ConfirmMsgModal').modal('show');
}

我必須這樣做，onclick =“（'+ cancelFunc +'）（）”>因為如果我這樣做，onclick =“'+ cancelFunc（）+'”>它會顯示為未定義。 目前的方法基本上只是打印匿名函數並將其分配給onclick（幾乎就像我剛剛在onclick上輸入了匿名函數）

這是我調用函數的地方：

    var transTypeHolder;
$("input[name='transType']").click(function () {
    var tabLength = $('#SNToAddList  tbody  tr').length;
    if (tabLength == 0) {
        var selection = $(this).attr("id");
        serialAllowableCheck(selection);
        resetSerialNumberCanvasAndHide();
        $("#Location").val("");
        $("#SerialNumber").val("");
    }
    else {
        transTypeHolder = $(this).val();
        var confirm = function () {

            var $radios = $('input:radio[name=transType]');
            $radios.filter('[value='+transTypeHolder+']').prop('checked', true);
            resetSerialNumberCanvasAndHide();
            $('#Location').val('');
            $('#SerialNumber').val('');
        };
        var cancel = function () {};
        confirmMessageBox("This is a test", cancel, confirm);
        return false;
    }

});

是否有一種方法可以將一個變量傳遞給匿名函數而不使用我所擁有的全局變量“transTypeHolder”？

在我得到之前，“你為什么這樣做？” 響應; Javascript不是我的強語，因為我使用的是ASP.NET MVC4。 我沒有機會坐下來詳細學習Javascript，我有點挑選它並搜索我需要的東西。 因此，如果有更好的解決方法，我願意接受建設性的批評。

Answer 1

不要在HTML中進行事件處理程序分配。 如果你希望人們能夠提供自己的功能取消和確認使用on ：

function confirmMessageBox(msg, cancelFunc, confirmFunc) {
    var html = ' <div class="container"><div class="modal fade" id="ConfirmMsgModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Confirmation Needed</h4></div><div class="locationTableCanvas"><div class="modal-body"><p>' + msg + '</p></div></div><div class="modal-footer"><table><tr><td><button type="button" class="btn btn-default cancel" data-dismiss="modal">Cancel</button></td><td><button type="button" class="btn btn-default confirm" data-dismiss="modal">Confirm</button></td></tr></table></div></div></div></div></div>';
    $("#confirmMsgContainer").html(html);
    $("#confirmMsgContainer").off('click', '.confirm').on('click', '.confirm', confirmFunc);
    $("#confirmMsgContainer").off('click', '.cancel').on('click', '.cancel', cancelFunc);
    $('#ConfirmMsgModal').modal('show');
}

請注意，我已經編輯了您用來刪除onclick的HTML，並為每個按鈕添加了一個類。 我也使用off來確保刪除任何以前添加的事件處理程序。

至於在不使用全局的情況下將變量傳遞給confirm函數，請使用閉包：

var transTypeHolder = $(this).val();
var confirm = (function (typeHolder) { 
    return function () {
        var $radios = $('input:radio[name=transType]');
        $radios.filter('[value='+typeHolder+']').prop('checked', true);
        resetSerialNumberCanvasAndHide();
        $('#Location').val('');
        $('#SerialNumber').val('');
    };
})(transTypeHolder);

這告訴JavaScript創建一個函數，它返回一個執行你想要它做的事情的函數。 那個“函數創建者”接受你想要保留的變量，允許它在其他地方使用。

現在，我還沒有對此進行測試，因此您可能會在將來進行一些調試，但希望它能為您提供一個起點。

Answer 2

您應該能夠通過在生成的名稱下從全局上下文訪問該函數來實現它（如果您有多個實例的框，則可以是多個），如下所示：

function confirmMessageBox(msg, cancelFunc, confirmFunc) {
    window['generatedCancelFunctionName1'] = cancelFunc;
    window['generatedConfirmFunctionName1'] = confirmFunc;
    var html = ' <div class="container"><div class="modal fade" id="ConfirmMsgModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Confirmation Needed</h4></div><div class="locationTableCanvas"><div class="modal-body"><p>' + msg + '</p></div></div><div class="modal-footer"><table><tr><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "generatedCancelFunctionName1()">Cancel</button></td><td><button type="button" class="btn btn-default" data-dismiss="modal" onclick = "generatedConfirmFunctionName1()">Confirm</button></td></tr></table></div></div></div></div></div>';
    $("#confirmMsgContainer").html(html);
    $('#ConfirmMsgModal').modal('show');
}

這樣您就沒有義務公開功能代碼。 您還可以為元素設置id屬性，並在第二部分中設置jquery click（）函數（但是在設置單擊之前需要創建html）