Как определить, что в jQuery щелкнули один из элементов?

Question

У меня есть похожий список:

<a id="item1" class="outofstock">item 1</a>
<a id="item2" class="outofstock">item 2</a>
<a id="item3" class="instock">item 3</a>
<a id="item4" class="instock">item 4</a>
<a id="item5" class="instock">item 5</a>

Эти элементы загружаются по запросу ajax. Я хочу показать предупреждение, когда пользователь нажимает на товар "нет в наличии". я уже попытался это:

$('.outofstock').click(function(){
alert("Sorry, this item is out of stock");
});  

Но только первый элемент "нет в наличии" будет показывать предупреждение. если я нажму на другой, ничего не произойдет. Что я должен сделать, чтобы добавить предупреждение для каждого? Заранее спасибо!

Answer 1

Он будет работать так, как у вас сейчас, если объекты не были загружены ajax, как показано в демонстрационной версии здесь .

Однако, поскольку объекты загружаются с помощью AJAX, вы можете заменить событие click () на live () событие, как показано ниже:

$('.outofstock').click(function(){
    alert("Sorry, this item is out of stock");
}); 

должно быть:

$('.outofstock').live('click',function(){
    alert("Sorry this item is out of stock");
});  

Это гарантирует, что все элементы, попадающие под этот селектор, будут использовать это событие, включая все элементы, которые еще не были созданы.

Answer 2

Если элементы загружаются запросом AJAX, тогда обычный обработчик события click не будет работать. Вам нужно будет дополнить его функцией live :

Прикрепить обработчик к событию для всех элементов, которые соответствуют текущему селектор, сейчас и в будущем.

Попробуйте:

$('.outofstock').live('click', function(){
    alert("Sorry, " + $(this).text() + " is out of stock");
});

Answer 3

Используйте event.target, чтобы определить, по какому элементу был нажатсодержание элемента

$('.outofstock').click(function(e){
   alert("Sorry, " + $(this).html() + " is out of stock");
}); 

Answer 4

Я часто нахожу этот метод полезным в сценарии ajax.

$(document).click(function (e) {

   if ($(e.target).is('.outofstock')) {
            alert("Sorry, this item is out of stock");
    }
}

Даже при наличии обратной записи событие щелчка остается связанным с документом, а не с отдельными элементами.

Answer 5

Вам нужно сделать его соответствующим каждому элементу; -)

$('.outofstock').each(function(){
    live('click', function(){
       alert("Sorry, this item is out of stock");
    });
});  

И использовать вживую из-за AJAX ...