Question

这可能是一个初学者的问题，但我不知所措。

我的目标是有一个按钮，当按下按钮所在的类时会执行某些操作......如果这样做有意义..这是我在页面上的内容的代码：

if(domain == 'google.com') {
$('#content').append('<div id="highlight"><h1 id="headline">'+title+'</h1><img id="dropDown" src="images/small-dropdown.png" alt=""/><img class="card" src="'+URL+'"/></div></br>');
$('.card').hide();     
}

所以代码循环大约25次然后在我的content div中我有一个很好的我想要的网站列表。我的下一段代码是：

$("#dropDown").click(function() {
    $('.card').toggle();
});

我遇到的问题是，当我按下dropDown按钮时，图像card应该只显示1个div，相反，图像会显示每个div，而我只是想要定位按钮所在的div。我该怎么做？

Answer 1

使用

$('#content').on('click', "#dropDown", function() {
    $(this).next('.card').toggle(); //Use next()
});

正在动态生成元素。您应该使用Event Delegation委托事件方法{。}}来使用.on()。

同样重要： ID必须是唯一的，所以我建议您使用类选择器，如

生成元素使用

if(domain == 'google.com') {
$('#content').append('<div id="highlight"><h1 id="headline">'
 + title +'</h1><img class="dropDown" src="images/small-dropdown.png" alt=""/><img class="card" src="'+URL+'"/></div></br>');
$('.card').hide();     
}

事件绑定

$('#content').on('click', ".dropDown", function() {
    $(this).next('.card').toggle(); //Use next()
});

Answer 2

为了将事件绑定到动态生成的元素，您应该使用.on()：

http://api.jquery.com/on/

它也适用于非生成元素。

Answer 3

拥有多个具有相同ID的元素是件坏事，但您可以使用以下内容：

$("#dropDown").click(function() {
   $(this).find('.card').toggle();
});

Jquery - 使用.click（）定位1 div

3 个答案: