jQuery:如何向类中添加单击处理程序并找出单击了哪个元素？

Question

我一直在使用以下方法向一个id添加一个click事件,我想知道我是否可以对一个类做同样的事情....我有一些项目(在每个循环中创建一个)和我需要能够点击它们然后点击拾取...这是我现有的代码

$('submit-button').bind('click', submit_click);


function submit_click() {
    alert('I am clicked');
}

我想知道是否有某种方法可以将变量传入我的函数中,因此我可以检查ID？或类似的

因此

function submit_click(element) { // notice element
    alert(element + ' clicked');
}

任何帮助真的很感激

谢谢

编辑

我尝试了以下内容,在调试"elem"中未定义...

$('.clear').bind('click', clear_click($(this)));

   function clear_click(elem) 
   {
        alert(elem.attr("id"));
   }

工作解决方案

我有工作的解决方案,但我不完全理解为什么,我很想知道为什么它的工作原理..

首先我试过了

 $('.clear').bind('click', clear_click($(this)) );

当我加载页面时它似乎工作"BUT"它进入"clear_click"方法而没有被点击 - 奇怪......

然后我试了这个..

 $('.clear').bind('click', function() { clear_click($(this)) } );

这很棒!但是我不明白为什么我必须传递一个函数然后在这个函数中调用我的clear_click.

任何人都可以解释为什么1个工作而另一个不工作？

每当我需要调用回调函数或类似函数时,我应该首先打开一个函数()然后调用函数内部的方法？

Answer 1

$(".yourclass").click ( function() {
    $(this).attr ( "id" ); //S(this) returns the current element
});

你可以像这样编码

$('.yourclass').bind('click', function() { submit_click($(this)) });

function submit_click(elem) 
{
    alert ( elem.attr ("id" ) );
}

编辑

   $('.clear').bind('click', function() { clear_click($(this)) });

   function clear_click(elem) 
   {
        alert(elem.attr("id"));
   }

这对你来说很好.

Answer 2

更新

回答你的第二个问题:

您可以在使用click事件时将函数绑定为第二个参数,但是您无法绑定函数并应用参数.另一方面,不需要this作为参数发送到clear_click函数,因为this函数内部的关键字引用了元素本身:

所以这适用于你的情况:

$('.clear').bind('click', clear_click);

function clear_click()  {
  alert(this.id);
}

不需要将此作为参数发送并且编码错误:

$('.clear').bind('click', clear_click(this));

在事件处理程序中,第一个参数是事件对象.您可以使用currentTarget或从该对象中提取单击的元素target.在jQuery中,这总是引用事件处理程序上下文中的currentTarget:

var handler = function(e) {
  var id = this.id; // this == e.currentTarget
}

$('submit').click(handler); // .click(fn) is shorthand for .bind('click', fn)

更多例子:

$('submit').bind('click', function(e) {

    console.log(e.target) // the target that was clicked on
    console.log(e.currentTarget) // the element that triggered the click
    console.log(this) // the same as above

});