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请求加载。我想在用户点击“缺货”项目时显示提醒。我alredy尝试了这个：

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

但是，只有第一个“缺货”项目才会显示警报。如果我点击另一个，没有任何事情发生。我该怎么做才能为每个人添加提醒？提前谢谢！

Answer 1

如果对象没有被ajax加载，它会像你现在拥有的一样工作，如演示here中所示。

但是，由于对象是使用AJAX加载的，您可能希望将{strong> 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

使用event.target确定点击了哪个元素。

正在使用 demo

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

或者如果你想抓住元素内容

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

Answer 3

如果元素是由AJAX请求加载的，那么普通的click事件处理程序将不起作用。您需要使用live函数补充它：

为与当前匹配的所有元素附加事件的处理程序选择器，现在和将来。

尝试：

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

Answer 4

你需要将它分别对应每个元素; - ）

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

因为AJAX而使用直播...

Answer 5

我经常发现这种方法在ajax场景中很有用。

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

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

即使有回复帖子，点击事件仍然与文档绑定，而不是单个项目。

如何检测jQuery中是否有一些项目被点击？

5 个答案: