在页面加载时将函数传递给函数

Question

假设我们有一个 javascript 函数，该函数设置为在单击屏幕上的删除按钮时运行...

function deleteThis(obj) {
     /*work to delete object*/

     window.location="newurl.php";
}

$('.delete').click(function(){
    deleteThis($(this));
});
<div class='delete'>Delete</div>   

现在假设您想要不同类型的删除按钮。他们都做同样的前几件事，但最后一步是不同的。我一直在做的是这个……

function deleteThis(obj) {
     /*standard work to delete object*/

     if (obj.attr('type')=='a') {
        //extra work for type a
     } else if (obj.attr('type')=='b') {
        //extra work for type b
     }

     window.location="newurl.php";

}
$('.delete').click(function(){
    deleteThis($(this));
});

<div class='delete' type='a'>Delete</div>

仅适用于几种不同的类型。但它开始有点失控了。我想要的是能够做到这一点......

在我的主 javascript.js 文件中：

function deleteThis(obj) {
     /*standard work to delete object*/

     /*do any extra functions that have been designated for this type*/

     window.location="newurl.php";

}
$('.delete').click(function(){
    deleteThis($(this));
});

代码仅包含在有“type a”按钮的页面上

$(document).ready(function(){
      /*something that tells the deleteThis() function that it should do something extra when running*/
});

这样我就不必将任何额外的变量传递给 deleteThis()，我不必为不同类型的删除按钮创建不同的 onclick 事件。我可以只有一种类型的删除按钮。然后在我希望删除按钮表现不同的页面上，我所要做的就是多放一点 javascript 代码。

这样的事情可能吗？

更新

请注意，deleteThis() 的末尾是一个窗口重定向。这使得任何额外的点击处理程序都不会被触发，因为我们已经离开了页面。

Answer 1

您可以做的一件事是使用eval() 函数。

代码仅包含在有“type a”按钮的页面上：

a = function() {
    // Do something extra here for the specific type a.
}

在您的主 javascript.js 文件中：

function deleteThis(obj) {
    // Special function for object type triggered by eval.
    try {
        eval(obj.attr('type'))();
    } catch(e) {}

    // Standard work here.
    window.location="newurl.php";

}

Answer 2

您可以使用 css 选择器为特定类型的按钮注册第二个单击侦听器。 监听器将按照添加的顺序被调用。

$('.delete').click(function(){
    console.log("I'm called for all delete buttons");
});

$('.delete[type=a]').click(function(){
    console.log("I'm also called for all delete buttons of type a");
});