1

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

由于在该语法中，元素在参数内，如果我的元素是“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>
4

6 回答 6

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 );
});
于 2013-07-10T08:14:04.110 回答
1

虽然我不是 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')页面加载时才有效。

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

所以这里是工作代码：

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

这是一个工作示例的小提琴。

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

于 2013-07-10T08:16:15.917 回答
0

尝试使用此代码

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

检查这个演示

于 2013-07-12T06:25:23.550 回答
0

Thanks for the response guys! but it now worked with no need of .each()... We just used the following:

$(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");
});
于 2013-08-27T02:25:13.553 回答
0 
$(".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) ); 
    });
});
于 2013-07-10T08:14:29.347 回答
0

试试这个

   $(".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");   
        });
    });
于 2013-07-10T08:14:38.097 回答