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 =＆＃34;（＆＃39; + cancelFunc +＆＃39;）（）＆＃34;＆gt;因为如果我这样做，onclick =＆＃34;＆＃39; + cancelFunc（）+＆＃39;＆＃34;＆gt;它显示为未定义。目前的方法基本上只是打印匿名函数并将其分配给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;
    }

});

有没有办法让一些人如何在不使用我所拥有的全局变量的情况下将变量传递给匿名函数，＆＃34; transTypeHolder＆＃34; ？

在我拿到之前，＆＃34;你为什么这样做？＆＃34;响应; 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创建一个函数，它返回一个执行你想要它做的事情的函数。那个＆＃34;功能创造者＆＃34;接收你想要保留的变量，允许它在其他地方使用。

现在，我还没有对此进行过测试，所以你可能会在未来进行一些调试，但希望它会为你提供一个起点。

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）

将需要参数的匿名函数传递给另一个函数作为参数，该函数将分配给onclick

2 个答案: