Question

I have 2 checkboxes constructed after performing an ajax call. When I try to reference their ids to do .change() event, the event won’t trigger. Any ideas? Here is my code:

Ajax call:

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

                }
        });

This is where the textbox is constructed:

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>"; 
}

I want to use the id’s of those two check boxes to trigger a change event using the following codes:

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

Is the position of the change event wrong? Where should I put the event? Or what is the problem? Thanks!

Answer 1

Since you are adding them after the page has loaded you will have to use on() or delegate() for event delegation. on() was added in 1.7, however, for prior versions delegate() is the most effective means to use event delegation.

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

It may be better to reference a class instead of an id:

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