如何在jQuery中的点击函数中获取“this”值

Question

我想为我的按钮使用实时点击功能，以便它可以在 Ajax 加载的 HTML 上运行，但后来我了解到 jQuery 实时点击的新版本 -- $(".button").live("click", function() {...}) -- 是带有 @987654322 的版本@函数。

由于在该语法中，元素位于参数内，如果我的元素是“this”，我无法检索该元素。有什么办法可以找回来吗？

$(".selection-item a").each(function(){
    var parent_selection = $(this).parents(".selection-item-wrapper");

    // $(this).click(function(){ //This is the original function which works fine EXCEPT on Ajax Loaded HTML
    $(parent_selection).on("click",this,function(){
        $(".selection-item a",parent_selection).removeClass("active");
        $(this).addClass("active");  //This does not target my desired element which is $(".selection-item a")'s this

        console.log( $(this) ); // The "this" value returns the parent_selection, I want it to return the particular "this" of $(".selection-item a") read from the .each() on top of my code
    });
});

这是我的 HTML。我正在创建一个简单的项目选择。每当我单击图像的锚标记时，我都会添加一个“活动”类，在其上添加带有边框的 css，以说明特定项目已被选中。

<div class="selection-item-wrapper">
    <div class="selection-item">
        <a href="javascript:void(0);"><img src="img/image1.png"></a>
        <h3>Item 1</h3>
    </div>
    <div class="selection-item">
        <a href="javascript:void(0);"><img src="img/image2.png"></a>
        <h3>Item 2</h3>
    </div>
    <div class="selection-item">
        <a href="javascript:void(0);"><img src="img/image3.png"></a>
        <h3>Item 3</h3>
    </div>
</div>

Answer 1

您可以将click 事件委托给a 元素，然后引用那些使用this 的元素：

$(parent_selection).on("click", "a", function(){
    // "this" will contain "a" element
    var $this = $(this);

    $(".selection-item a", parent_selection).removeClass("active");
    // Or maybe: $this.siblings("a").removeClass("active");

    $this.addClass("active");  // Add .active to "a"
    console.log( $this );
});

Answer 2

虽然我不能 100% 确定没有 html 标记，但我对每个都有点困惑。

无论如何，我会更改 .on 函数以更具体的方式定位元素。

$('.selection-item').on("click","a",function(){
        $(".selection-item a").removeClass("active")
        var myself = $(this);
        myself.addClass('active');
        console.log( $(this) );
});

更新

您说您需要它来处理 ajaxed 标记。好吧，.on 只有在顶级选择器：$('.selection-item-wrapper') 在页面加载时才有效。

如果您尝试将 .on 绑定到 ajax 内容，它将不起作用。因此，如果没有你在 ajaxing 之前给我完整的标记，我将无法提供帮助。 （我可以，但这样做很糟糕）。所以给我所有的代码。

所以这里是工作代码：

$('.selection-item-wrapper').on("click","a",function(){
    $(".selection-item a").removeClass("active")
    var myself = $(this);
    myself.addClass('active');
    console.log( myself );
    return false;
});

这是fiddle 的工作示例。

顺便说一句，当您已经将事件绑定到它们 $('.selection-item').on("click" 时，无需提供 url 的 javascript:void(0);。因此，我没有在代码中添加更难维护的 js，而是在代码中添加了 return false;。还有其他方法可以防止链接默认行为，例如preventDefault()。但是对于这种情况returning false 很好。

Answer 3

$(".selection-item a").each(function(){
    var parent_selection = $(this).parents(".selection-item-wrapper");
    var that = this;  // HERE
    $(parent_selection).on("click",this,function(){
        $(".selection-item a",parent_selection).removeClass("active");
        $(that).addClass("active");  //This does not target my desired element which is     $(".selection-item a")'s this

        console.log( $(that) ); 
    });
});

Answer 4

试试这个

   $(".selection-item a").each(function(i,el){
        var parent_selection = $(el).parents(".selection-item-wrapper");

        $(parent_selection).on("click",function(){
            $(".selection-item a",parent_selection).removeClass("active");
            $(el).addClass("active");   
        });
    });

Answer 5

试试这个代码

$('.selection-item').click(function(){
 $('.selection-item').removeClass('active');
    $(this).addClass('active');
});

查看demo

Answer 6

感谢大家的回复！但它现在不需要 .each() 就可以工作了……我们只使用了以下内容：

$(document).on("click",".selection-item a",function(){
    var parent_selection = $(this).parents(".selection-item-wrapper");
    $(".selection-item a",parent_selection).removeClass("active");
    $(this).addClass("active");
});