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

时间:2009-12-16 14:33:23

标签: javascript jquery

我一直在使用以下方法向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个有效,而另一个没有?

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

5 个答案:

答案 0 :(得分:10)

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

这对你很好。

答案 1 :(得分:5)

<强>更新

回答你的第二个问题:

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

所以这适用于你的情况:

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

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

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

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

在事件处理程序中,第一个参数是事件对象。您可以使用currentTargettarget从该对象中提取点击的元素。在jQuery中, this 总是引用事件处理程序上下文中的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

});

答案 2 :(得分:0)

这应该有效:

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

function submit_click(element) { // notice element
   alert($(element).attr("id") + ' clicked');
}

答案 3 :(得分:0)

只需将 $(this)添加到您的函数中,您不需要发送任何参数,因为您仍然处于被点击元素的上下文中。

function submit_click() { // notice element
            alert($(this).attr('id') + ' clicked');
        }

答案 4 :(得分:0)

将处理程序绑定到函数时,单击的元素将是第一个参数

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

function submit_click(element){
  //element is the .submit-buttom element
  alert(element+'  was clicked');
  alert($(element)+' was clicked');
}