2012-07-26 41 views
0

我在執行ajax調用後構造了2個複選框。當我嘗試引用它們的id來執行.change()事件時,事件不會觸發。有任何想法嗎?這裏是我的代碼:Jquery .change()事件問題

Ajax調用:

$.ajax({       
    url:"../includes/MC.Admin.ajax.php", 
    type: "POST", 
    data: empupdatedata, 
    success: function(empupdate) {    
    var empupdateJson = $.parseJSON(empupdate); 

        $("#empupdateinfo_tbl").html(empupdateJson.updateempinfo); 

       $("#empemploymentupdateinfo_tbl").html(empupdateJson.updateempemploymentinfo); 


       $('#employee-update').bPopup({ 
        modalClose: false 
       }); 

       } 
     }); 

這是構建文本框:

if($rm5->isbonus == 1 && $rm5->isallowance == 0) 
{ 
    $updateemployeeemploymentinfo .= "<tr><td class = 'tbl_data'> 
    Additional Payment</td><td>Bonus <input type = 'checkbox' 
    name = 'isbonus' id = 'uisbonus'> Allowance <input type = 'checkbox' 
    name = 'isallowanece' id = 'uisallowance'></td></tr><tr></tr>"; 
} 

我想用這兩個複選框的ID的觸發更改事件使用以下代碼:

$("#uisbonus").change(function(){ 
    if($(this).attr("checked")) 
    { 
     $('#uamountcon').append("<td id = 'uamountcon'><input type = 'text' id = 'uamount ></td>") 

    } 
    else 
    { 
     $('#uamountcon').html(); 
    } 
}); 

$("#uisallowance").change(function(){ 
    if($(this).attr("checked")) 
    { 
     $('#uamountcon').append("<td id = 'uamountcon'><input type = 'text' id = 'uamount ></td>") 
    } 
    else 
    { 
     $('#uamountcon').html(); 
    } 
});//I placed this code insidethe $(document).ready(function() { }); 

更改事件的位置是否錯誤?我應該在哪裏舉辦活動?或者是什麼問題?謝謝!

+0

你在控制檯中的錯誤?你預計什麼時候開火? – bPratik 2012-07-26 15:57:25

+1

將元素添加到頁面(在ajax成功範圍內)後直接將更改事件綁定移動,或者使用'.delegate'或'.on'與委託語法綁定事件。 – 2012-07-26 15:57:34

+1

您的問題缺少有關_when_您嘗試綁定處理程序的信息。它可能是你實際插入元素之前綁定的。您可能想看看jquerys live()方法或其後繼者。 – arkascha 2012-07-26 15:57:53

回答

1

因爲您將它們添加在頁面加載後,你將不得不使用on()delegate()事件代表團。 on()已於1.7版本中增加,但對於以前版本delegate()是使用事件委託的最有效方法。

$("body").delegate("#uisbonus", "change", function(){ 
... 
$("body").delegate("#uisallowance", "change", function(){ 

這可能是更好的參考的class而不是id

$("body").delegate(".uiClassName", "change", function(){ 
+0

我應該把代碼放在document.ready?或者在ajax調用之後?放置在document.ready中時似乎不起作用。 – ljpv14 2012-07-26 16:07:33

+0

從技術上說,沒關係,但是你可以把它放在'$(document).ready(function(){...})'聲明中。 – RobB 2012-07-26 16:08:45

+0

得到它的工作。謝謝!關於我的帖子的另一個問題你爲什麼認爲表格數據追加沒有被觸發的原因?謝謝 – ljpv14 2012-07-26 16:13:58

0

事件代表團將是最簡單的解決,

$(document).delegate("#uisbonus","change",function(){ 
    if($(this).attr("checked")) 
    { 
     $('#uamountcon').append("<td id = 'uamountcon'><input type = 'text' id = 'uamount ></td>") 

    } 
    else 
    { 
     $('#uamountcon').html(); 
    } 
}); 

$(document).delegate("#uisallowance","change",function(){ 
    if($(this).attr("checked")) 
    { 
     $('#uamountcon').append("<td id = 'uamountcon'><input type = 'text' id = 'uamount ></td>") 
    } 
    else 
    { 
     $('#uamountcon').html(); 
    } 
});