Question

执行ajax调用后，我有2个复选框。当我尝试引用它们的id来执行.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() { });

更改事件的位置是否错误？我应该把活动放在哪里？或者问题是什么？谢谢！

Answer 1

由于您在页面加载后添加它们，因此必须使用on()或delegate()进行事件委派。在{1.7}中添加了on()，但对于先前版本delegate()是使用事件委派的最有效方法。

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

最好引用class而不是id：

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

Answer 2

事件委派将是最简单的修复，

$(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();
    }
});

Jquery .change（）事件问题

2 个答案: