Question

这里真的很基本的东西。我想给点击功能一个名称并为其分配一些参数。目标是代码可重用性，这样我只能为常见任务编写一个通用函数，例如使用户能够删除各种数据。

这是一个jsfiddle来向您展示我的意思。

这就是代码：

HTML：

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

和JS：

// this function would be loaded on my site's template and therefore would be available across my entire site.
function deleteThis(data_id){           
   $('button').on('click', 'button', function(){
      $('div[data-id="'+data_id+'"]').hide();  
   });
}  

var clicked_id=3;
function deleteThis(clicked_id); 
// this function would be called on the various pages where users can delete things and this variable, clicked_id, would be assigned=3 by the user's action on that page.

如何为此按钮点击事件命名？

更新谢谢大家！ $('button')应该是$(document.body)或按钮的父元素。如果你进行那么简单的改变就行。你也可以像Michael Buen在下面所说的那样做。

Answer 1

只需重构代码，将删除功能放在自己的功能

上

<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();  
}

实时测试：http://jsfiddle.net/e2kuj/2/

Answer 2

在你的小提琴手中，(function deleteThis(){})()将其设为私有，并且您正试图以全局形式访问它！

Answer 3

几乎是对的。我更新了它 - ＆gt; http://jsfiddle.net/fz5ZT/41/

function deleteThis(id){
    $('button').click(function(){
        $('div[data-id="'+id+'"]').hide();  
    });    
};
deleteThis(3);

Answer 4

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

更正了HTML :(不要使用自定义属性来引用HTML - 它们更慢）

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

JS :(未经测试）

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);
} );

现在您可以交换deleteTarget，并且具有该ID的HTML将被yoinked。

然而，如果这是作业，我想知道你是否理解作业。名为“clicked_id”的var表明想法是单击div使它们消失并使用委托。那个很容易。

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

'on'是曾经适当命名并且不那么容易引起混淆的'委托'jquery方法的新穷人的名字。实际上，使用“删除”类的正文中的任何内容都会触发处理程序。我们不关心ID，因为想法是杀死被点击的div，'this'给我们一个参考。这对于JQ来说是不寻常的行为，因为大多数方法在'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.

Answer 5

您可以使用$('button').on('click', 'button', clickHandler);来引用clickHandler功能。

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

如果clickHandler中存在错误，我将能够发送修补程序
有人可以使用匿名方法扩充我的方法
可读，并且在出现错误时查看堆栈跟踪也很有用

希望有所帮助。

<强>更新

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

Answer 6

你可以用不同的方式删除元素：

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

http://jsfiddle.net/fz5ZT/46/

javascript对一个点击功能进行去匿名化

6 个答案: