javascript取消单击函数的匿名性

这里有一些基本的东西。我想给一个点击函数起个名字，并给它分配一些参数。目标是代码的可重用性，这样我就可以为常见任务（例如，允许用户删除各种数据）只编写一个通用函数

这里有一个例子来告诉你我的意思

下面是代码：

HTML：

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>

如何为该按钮单击事件命名

更新谢谢大家！

$（'button'）

应该是

$（document.body）

或按钮的父元素。如果你做一个简单的改变，它就会起作用。你也可以按照Michael Buen下面的建议来做

您可以使用

$（'button'）。在（'click'，'button'，clickHandler'）

以引用

clickHandler

函数

我非常喜欢这些东西，因为除了可重复使用外，它还有以下优点

• 我将能够发送一个补丁，以防clickHandler中出现错误
• 有人可以扩充我的方法，而匿名方法是不可能的
• 可读，在出现错误时查看堆栈跟踪也很有用

希望有帮助

更新：

function clickHandler(ev) {
    ev.preventDefault();
    // ... handler code
}

---

您可以使用其他方式删除该元素：

  $('button').on('click', function(){
      $(this).next("div").remove();
    });

---

在您的fiddler中，

（函数deleteThis（）{}）（

将其设置为私有，您正试图以全局方式访问它

几乎是对的。我更新了它->

---

只需重构代码，将删除功能放在自己的函数中即可

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
​

$('button').on('click', function() { deleteImmediately(3) });

function deleteImmediately(id) { -- refactored code
    $('div[data-id='+id+']').hide();  
}​

删除此项
坏东西
还有什么不好的吗
​
$（'button'）。在（'click'，function（）{delete立即（3）}）上；
函数delete立即（id）{--重构代码
$（'div[data id='+id+']'）。hide（）；
}​

---

现场测试：

我认为你误解了事件。delete只有在处理程序中才有意义

更正的HTML：（不要使用自定义属性来引用HTML-它们比较慢）

现在您可以交换deleteTarget，具有该ID的HTML将被删除

然而，如果这是作业，我想知道你是否理解作业。名为“clicked_id”的变量建议单击div使其消失并使用委托。那个很简单

您需要了解事件委派和事件冒泡，以了解这里发生了什么。基本上，当单击某个内容时，事件会触发父元素，然后触发该父元素的父元素，一直到HTML标记。这在所有事件中都会发生，并且不会造成您可能认为的问题，因为容器很少为事件分配侦听器。链接和按钮通常是端点节点，最多包含一个跨度或图像。通常，当冒泡导致问题时，这是因为有人对HTML做了一些糟糕的事情，或者他们应该首先使用委托

“on”是一个新的名称，该名称对于曾经恰当命名且不太容易混淆的“delegate”jquery方法来说很糟糕。本质上，主体中具有“delete”类的任何内容都会触发处理程序。我们不关心ID，因为我们的想法是杀死被点击的div，“this”给了我们一个对它的引用。这对于JQ来说是不寻常的行为，因为大多数方法的“This”点都指向“body”，但对于事件委托来说，指向This显然更有用

$('body').on('click', '.delete', function(e){
    $(this).remove(); //this refers to the originally clicked element
} );
//note: not the solution you asked for, but possibly the one you needed.

---

嗨，g13n，谢谢你的提示，你能告诉我在我的例子中clickHandler函数是什么样子吗？嗨，Raminson，你能告诉我在我的例子中该代码是什么样子吗？这对我来说是一个新领域。您在JSFIDLE中的代码与这里的不同。您已将函数名设置为仅在函数本身内部可用。去掉函数的外部

（）（）

部分。此外，您还在上使用事件委派版本的

。这意味着单击的
按钮
只有在其子代按钮被单击时才会运行。很明显，你没有一个按钮里面的按钮…更新的代码：请把你的解决方案张贴在这里，而不仅仅是在一个不同的网站上。这样，将来的读者可以在链接中断时使用它。感谢Erik，最终将有多个数据段连接到单击事件（例如，$.post（）的url），这就是为什么我希望有参数，而不仅仅是使用
$（This）
，而是感谢您为我澄清了许多概念，
<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
​

$('button').on('click', function() { deleteImmediately(3) });

function deleteImmediately(id) { -- refactored code
    $('div[data-id='+id+']').hide();  
}​

<button>delete this</button>
<div id="del_3" class="delete">something bad</div>
<div id="del_4" class="delete">something else bad</div>

var deleteTargetId = 'del_3'; //clicked_id renamed for clarity

function deleteThis(targetId){
    $('#'+targetId).remove(); //removes rather than hides the html
}

$('button').click( function(){
    deleteThis(deleteTargetId);
} );

$('body').on('click', '.delete', function(e){
    $(this).remove(); //this refers to the originally clicked element
} );
//note: not the solution you asked for, but possibly the one you needed.