2012-05-04 41 views
0

我對javascript非常陌生,並且碰壁了。在ajax上加載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正在返回正確的字段ID的即#Check_2,#Row_2,#Check_3,#Row_3等等等等的JavaScript,這是正確的。但是,如何在渲染時加載jquery?

回答

0

由於新字段是動態發佈的,因此未附加.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> 

,然後使用新的togglestogglable數據屬性

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

謝謝,但似乎沒有有所作爲 – user1019144

+0

更新的答案。 – zsquare

+0

謝謝。太棒了! – user1019144