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也應該工作。