基于另一个javascript文件定义一个带参数的函数。

Question

我有一些带参数的通用js函数，我将重复使用，所以我想，我创建了另一个js文件，并将通用代码存储在这里，在目标html中，我定义了这些带参数的函数，如果函数被调用，它们就会被执行。

我把这个常用函数存放在一个单独的js文件中。

function add_onClick(url) {
    $.ajax({
        url: url,
    }).done(function (response) {
        var popup = $("#entity-popup").dxPopup("instance");
        popup.option("contentTemplate", function (content) {
            content.append(response);
        });
        popup.show();
    });
}

如果我在目标html中这样定义这个函数：

var add_onClick = add_onClick('/MasterData/Sender/NewSender')

那么这个函数会在每次加载页面时执行，而不是在点击按钮时执行。

如果我像这样定义函数，那么该函数将在每次页面加载时执行，而不是在点击按钮时执行。

var add_onClick = function () { add_onClick('/MasterData/Sender/NewSender'); };

那么我就会得到 "javascript最大调用堆栈大小超过 "的错误。

我应该如何在目标html中定义该函数，以便只在用户点击添加按钮时执行？

无法解释的额外请求。

EDIT:

该 /MasterData/Sender/NewSender 目标是一个动作，它返回一个带有新的 Sender 这样的对象。

public IActionResult NewSender()
    {
        ViewBag.Mode = "new";
        Sender Sender = new Sender();
        return PartialView("Sender", Sender);
    }

我想，这应该是网络窗口的额外流量。但我没有得到这一行额外的内容，如果是在 add_onClick 函数不在一个单独的文件中。

Answer 1

var add_onClick = function () { add_onClick('/MasterData/Sender/NewSender'); };

这是一个无限循环。它只是不断地调用自己。

也许像这样？

document.getElementById('myButton').addEventListener('click', () => {
  add_onClick('/MasterData/Sender/NewSender')
})

<button id="myButton">Click me</button>