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

如果您完全确定每个文本框都位于“赞”元素的旁边，则可以使用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 forum answer

您必须将click事件添加到现有元素。您无法将事件添加到动态创建的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();
});

应该这样做。

Jquery尝试使用onclick事件处理动态id

5 个答案: