如何從動態創建的列表中填充文本區域

Question

我有一個地址列表。每個地址有2個鏈接，允許用戶點擊將地址添加到收藏textarea或交付textarea。

下面是這個視圖

<p>Recent addresses</p> 
<ul> 
    <% @recent_addresses.each do |address| %> 
     <li> 
      <%= address %> 
      <%= link_to 'Add to collection text area', '#', class: 'collection' %> 
      <%= link_to 'Add to delivery text area', '#', class: 'delivery' %> 
     </li> 
    <% end %> 
</ul> 

這裏是等效的HTML

<p>Recent addresses</p> 
<ul> 
    <li> 
     14 Main road 
     <a class="collection" href="#">Add to collection textarea</a> 
     <a class="delivery" href="#">Add to delivery textarea</a> 
    </li> 
    <li> 
     22 Main road 
     <a class="collection" href="#">Add to collection textarea</a> 
     <a class="delivery" href="#">Add to delivery textarea</a> 
    </li> 
</ul> 

到目前爲止，我有以下的javascript/jQuery代碼

$(function(){ 
    $(".collection").click(function(e){ 
     e.preventDefault(); 
     $("#collection_address").val($(this).text()); 
    }); 
}); 

$(function(){ 
    $(".delivery").click(function(e){ 
     e.preventDefault(); 
     $("#delivery_address").val($(this).text()); 
    }); 
}); 

我找不出如何從動態創建的列表中獲取正確的地址。

Answer 1

首先，修改您的HTML以包裝地址文本的元素。這將使它更容易選擇：

<p>Recent addresses</p> 
<ul> 
    <li> 
     <span class="address">14 Main road</span> 
     <a class="collection" href="#">Add to collection textarea</a> 
     <a class="delivery" href="#">Add to delivery textarea</a> 
    </li> 
    <li> 
     <span class="address">22 Main road</span> 
     <a class="collection" href="#">Add to collection textarea</a> 
     <a class="delivery" href="#">Add to delivery textarea</a> 
    </li> 
</ul> 

我用了span，但你需要將工作的任何元素。 class是重要的一點。您可以通過textNodes拖網來查找值，但如果您出於任何原因更改標記，則會出現問題。使用這種方法，只要文本在該類的元素中，它就可以放置在li的任何位置。

然後你需要改變你的jQuery來檢索此值：

$(function() { 
    $(".collection").click(function(e){ 
     e.preventDefault(); 
     var addr = $(this).closest('li').find('.address').text(); 
     $("#collection_address").val(addr); 
    }); 

    $(".delivery").click(function(e){ 
     e.preventDefault(); 
     var addr = $(this).closest('li').find('.address').text(); 
     $("#delivery_address").val(addr); 
    }); 
}); 

Example Fiddle

注意，你可以將所有jQuery代碼在一個domready中塊的DOM依賴 - 沒有必要每一個陳述都是自己的陳述。