Как получить значение «this» внутри функции щелчка в jQuery

Question

Я хочу использовать функцию прямого щелчка для своих кнопок, чтобы она работала над Ajax Loaded HTML, но потом я узнал, что новая версия для jQuery live click - $(".button").live("click", function() {...}) - это функция с .on().

Поскольку в этом синтаксисе элемент находится внутри параметра, я не смог извлечь этот элемент, если мой элемент «это». Есть ли способ получить его?

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

Спасибо за ребят ответа! но теперь он работал без необходимости .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"); 
}); 

Answer 2

Вы можете делегировать 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 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

Пока я не 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. Поэтому, если вы не дадите мне всю разметку до того, как я напишу вам вещи, я не смогу помочь. (Я могу, но это плохой поступок). Так что дайте мне весь код.

Так вот рабочий код:

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

Вот fiddle с рабочим примером.

Как примечание стороны, нет необходимости указывать url javascript:void(0);, когда у вас уже есть связанное с ним событие $('.selection-item').on("click". Поэтому вместо того, чтобы добавлять более сложные для поддержания js в коде, я добавил return false; в код. Существуют и другие способы предотвращения поведения ссылок по умолчанию, например, preventDefault(). Но для этой ситуации returning false в порядке.

Answer 6

Попробуйте с этим кодом

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

Проверить это demo