Jquery 尝试通过 onclick 事件使用动态 ID

Question

我遇到的问题是，当我单击 LIKE div 时，它会打开所有文本框，

它只需要在单击事件上显示一个文本框。

下面是 html 示例：

<div id="sublike-1">Like</div>
<div id="sublike-form-1"><input type="text" /> Save</div>

<div id="sublike-2">Like</div>
<div id="sublike-form-2"><input type="text" /> Save</div>

<div id="sublike-3">Like</div>
<div id="sublike-form-3"><input type="text" /> Save</div>

我的 Jquery：

// Display Sub Like form
$(this).find("div[id^='sublike-']").live('click', function(){
 $("div").find("div[id^='sublike-form-']").toggle();
});

我该怎么做才能使其不会同时打开两个文本框，我必须更改我的 html div、我的 jquery 还是两者都更改？

谢谢

Answer 1

如果您绝对确定每个文本框都位于“Like”元素旁边，则可以使用 siblings 或 next：

$(document).find("div[id^='sublike-']").live('click', function(){
    $(this).siblings("[id^='sublike-form-']:first").toggle();
});

但是如果文本框可能距离 Like 元素“很远”，你可以解析 id：

$(document).find("div[id^='sublike-']").live('click', function(){
    var num = this.id.split('-')[1];
    $('#sublike-form-' + num).toggle();
});

检查这个例子：
http://jsfiddle.net/marcosfromero/ZbTzN/

Answer 2

jQuery 论坛答案

您必须将点击事件添加到现有元素。您不能将事件添加到动态创建的 dom 元素。如果您想向它们添加事件，您应该使用“.on”将事件绑定到现有元素。

$('p').on('click','selector_you_dynamic_created',function(){...});

.delegate 也应该工作。

Answer 3

$(this).find("div[id^='sublike-']").live('click', function(){
 $(this).next().toggle();
});

Answer 4

根据 DOM，尝试一下应该可以:)

$(this).find("div[id^='sublike-']").live('click', function(){
 $(this).next('div[id^="sublike-form-"]').toggle()
});

Answer 5

我看到其他人发布了一些基于 .live 的非常有效的解决方案，但我想无论如何我都会提出我的解决方案，

首先，我建议您稍微更改一下标记，如果可以的话，像这样，

<div class="sublike-box">
    <a class="sublike-btn">Like</a>
    <div class="sublike-form"><input type="text" /> Save</div>
</div>

<div class="sublike-box">
    <a class="sublike-btn">Like</a>
    <div class="sublike-form"><input type="text" /> Save</div>
</div>

<div class="sublike-box">
    <a class="sublike-btn">Like</a>
    <div class="sublike-form"><input type="text" /> Save</div>
</div>

这为标记提供了更具可读性和语义的结构，使其更易于阅读和遵循。

接下来，对于代码，我强烈鼓励使用 .delegate 方法而不是 .live。

$('div.sublike-box').delegate('a.sublike-btn', 'click', function (e) {
    $(this).next('div.sublike-form').toggle();
});

应该可以解决问题。

Answer 6

我解决了添加类而不是 id 的问题。如果你可以将 id 更改为 class，就可以了