jQuery的尝试与动态ID的工作与onclick事件

Question

我遇到的问题是，当我点击了类似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

如果你完全确保每一个文本框将是下一个“赞”的元素，你可以使用siblings或next：

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

但是，如果文本框可能是“远”距离像的Elemen T，你可以解析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

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

Answer 3

根据DOM，试试这个应该工作:)

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

Answer 4

我看到其他人发布基于.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 5

jQuery forum answer

你必须点击事件添加到一个存在的元素。您不能将事件添加到动态创建的dom元素。我想向他们添加事件，您应该使用“.on”将事件绑定到已存在的元素。

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

.delegate也应该工作。