Question

我创建了一个列表，显示缩略图和每个旁边的电影名称。对于每个新缩略图，我都会打这个电话：

$("#thumb").append('<li><img id="amatx" src='+value+' /></li><p id="titol">'+titl+'</p>');

thumb 是列出缩略图和标题的除数。值包含指向缩略图的链接，而 titl 包含标题。我从API获取所有这些信息。现在我想创建一个监听器，当我点击缩略图或标题时，它会显示电影的名称。这就是我现在所得到的：

App.prototype.listenerFilms = function(){
        $("#amatx").on('click', function(evt){

        });
};

我真的不知道如何获取信息，因为所有图片和标题都有相同的ID ...有人可以帮我吗？

Answer 1

使用类而不是ID，因为ID必须是唯一的（jQuery只匹配具有给定ID的第一个元素）。

$("#thumb").append('<li><img class="amatx" src='+value+' /></li><p class="titol">'+titl+'</p>');

当您拥有动态元素时，请使用附加到不变的祖先元素的委托事件处理程序

e.g。

$(document).on('click', '.amatx', function(){
     // Listener code here
});

这适用于仅在事件时存在的元素（而不仅仅是在事件注册时）。它监听事件（在这种情况下是单击）冒泡到祖先，然后将jQuery选择器应用于bubble-chain中的元素，然后仅调用该函数任何导致事件的匹配元素。

注意： document是默认值，如果没有其他元素更接近/方便将委托事件处理程序附加到。永远不要将body用于委派事件，因为它的计算高度为0，具体取决于样式，然后不会获得点击事件。坚持document作为默认值。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/5dsqdq5h/

关于下面的评论，您需要从点击的元素中向上搜索，然后找到旁边的下一个titol元素。

Answer 2

当您输入click事件时，您可以使用$（this）元素。

并使用类名而不是ID。

所以：

App.prototype.listenerFilms = function(){
    $("#amatx").on('click', function(evt){
        console.log($(this).find('p#titol').text());
    });
};

Answer 3

$("#thumb").on('click', function(e) {
    var target = $(e.target);
    if(target.hasClass('amatx')) {
        console.log(target.closest('li').next('.titol').text());
    }    
});

Fiddle

Answer 4

而不是你的方式，我认为这样更好：

$("#amatx").click(function (){
//Here you have your element that has been clicked ;)
objClicked = $(this);
});

希望是有用的

如何使用JQuery从被点击的元素获取信息？

4 个答案: