загрузка javascript на ajax render

Question

Я очень новичок в javascript и попал в стену.

В основном у меня есть форма с несколькими полями, используемыми для запросов (я работаю с кем-то кодом elses).

Одной из особенностей этой формы является возможность отправки нескольких запросов, выбирая количество запросов из раскрывающегося списка, что многие дубликаты формы будут загружаться с использованием ajax.

Я недавно добавил 2 новых поля к этой форме. Флажок и текстовое поле. Используя jquery, я сделал простой переключатель, чтобы, если флажок установлен, появится текстовое поле.

<tr> 
    <td> 
     Allow Checkbox 
    </td> 
    <td> 
     <input type="checkbox" name="Check_1" id="Check_1" value="2" />I accept 
    </td> 
</tr> 
<tr id="Row_1" style="display:none;"> 
    <td> 
     Here is a text field 
    </td> 
    <td> 
     <input type="text" name="field_1" id="field_1" value="" /> 
    </td> 
</tr> 
<script> 
         $('#Check_1').click(function() { 
         $("#Row_1").toggle(); 
         }); 
         </script> 

Это работает должным образом, однако он не работает при выборе нескольких запросов. Таблицы, загруженные через ajax, не загружают часть javascript, поэтому эти поля не переключаются, когда отмечены,

Я проверил синтаксис, и все кажется прекрасным. Php возвращает правильный идентификатор поля, то есть # Check_2, # Row_2, # Check_3, # Row_3 и т. Д., То же самое для javascript, это правильно. Но как я могу загрузить jquery при его рендеринге?

Answer 1

Поскольку новые поля поступают динамически, обработчик .click не прилагается.

Попробуйте использовать:

$('#Check_1').live("click", function() { 
    $("#Row_1").toggle(); 
}); 

- Обновление -

Я только что видел, что вы упомянули ваши ids меняются. В этом случае я предлагаю вам добавить еще один атрибут в ваш html и использовать его как селектор.

Например:

<tr> 
    <td> 
     Allow Checkbox 
    </td> 
    <td> 
     <input type="checkbox" name="Check_1" id="Check_1" value="2" data-toggles />I accept 
    </td> 
</tr> 
<tr id="Row_1" style="display:none;" data-togglable> 
    <td> 
     Here is a text field 
    </td> 
    <td> 
     <input type="text" name="field_1" id="field_1" value="" /> 
    </td> 
</tr> 

А затем используйте новый toggles и togglable атрибуты данных

$('[data-toggles]').live("click", function() { 
    if ($(this).is(":checked")){ 
     $(this).parents("tr").siblings("[data-togglable]").show(); 
    } else { 
     $(this).parents("tr").siblings("[data-togglable]").hide(); 
    } 
});