Использование jquery для скрытия динамически добавленных divs

Question

Код jquery ниже скроет divs, заканчивающиеся на -value-wrapper, когда страница загружается. Моя проблема в том, что кнопка «Добавить больше» добавит еще одну строку (с увеличенным числом). Когда это происходит, все divs раскрываются. Есть ли способ сохранить оригинальные скрытые и скрыть их в новом наборе?

HTML-разметка выглядит следующим образом:

<div id="group-information-items"> 
    <fieldset> 
     <legend>Member Information</legend> 
     <label>Form label 1</label> 
     <table> 
      <tr> 
       <td> 
       <div class="form-radios"> 
        <input type="radio" class="form-radio" checked="checked" value="0" name="gci[0][fa][value]" id="edit-gci-value-0"> A 
        <input type="radio" class="form-radio" value="1" name="gci[0][fa][value]" id="edit-gci-value-0">B 
       </div> 

       <!-- This is the div that is hidden --> 
       <div id="edit-gci-0-fa-list-value-wrapper" class="form-item"> 
        <label>List: </label> 
        <textarea name="gci[0][fa_list][value]" rows="5" cols="60"></textarea> 
       </div> 

       </td> 
      </tr> 
     </table> 

     <!-- WHEN THIS BUTTON IS CLICKED, A CLONE OF THE ROW ABOVE IS APPENDED TO THE TABLE --> 
     <!-- THE ONLY DIFFERENCE IS [0] BECOMES [1] AND SO ON --> 
     <div class="content-add-more clear-block"> 
      <input type="submit" value="Add more values" id="edit-gci-add-more" name="gci_add_more"> 
     </div> 
    </fieldset> 
</div> 

код, который делает первоначальный шкурку ниже:

$("#group-information-items div").each(function() { 
     $("div[id$='-value-wrapper']").each(function() { 
         $(this).hide(); 
     }); 
}); 

Answer 1

Во-первых, если у меня что-то не хватает, вы можете значительно упростить этот скрытый код:

$("#group-information-items").find("div[id$='-value-wrapper']").hide(); 

Это вызывает вопрос. Почему бы не установить обычный статический стиль, чтобы условие по умолчанию для любого из этих divs было скрыто? Как практика имеет смысл выравнивать стили по умолчанию с логическим состоянием по умолчанию ваших элементов страницы. Итак:

Теперь все «новые» дивины будут скрыты. Измените свой код на show() divs по мере необходимости (вы не показали достаточно, чтобы знать, как, где и когда вы это сделаете). Если вы хотите привязать поведение к элементам, созданным после начальной загрузки страницы, вы должны взглянуть на live() или delegate().

Answer 2

пытаются прятать дивы на нажатие кнопки ввода:

$("#edit-gci-add-more").click(function() { 
      $("div[id$='-value-wrapper']").hide(); 
    });