jQuery change not triggering after DIV has already been loaded, using CakePHP - php

Question

When a room_id is selected from the drop down, I use the JS helper to populate the security_deposit and room_rate inputs. The issue is that if I select a room_id, the room_rate_update jQuery change function stops working. However, when page loads and I don't select a room_id, I can type in the room_rate box and it's triggered, but not after I select a room_rate.
The one thing that I think may be causing this is when I select a room_id, the entire div containing the room_rate is updated. It was previously generated by the CakePHP form helper, however, I made sure that the div is replaced by the exact same name, class, id, etc... It's identical to the one that appears when the page loads
Here is the form in my view
echo $this->Form-create('Arrival');
echo $this->Form->input('room_id',array('options' => $room_numbers, 'label'=>'Room Number'));
?>
<div id="room_rate_update">
<?php
echo $this->Form->input('room_rate', array('label' => 'Room Rate (numbers only)'));
?>
</div>
<div id = "security_deposit_update">
<?php
echo $this->Form->input('security_deposit',array('label' => 'Security Deposit (numbers only)'));
?>
</div>
<?php
echo $this->Form->input('balance_upon_arrival',array('label' => 'Balance Due Upon Arrival'));
Here is the JS helper and jQuery function for the updates
//if someone changes the room_rate, this should update the deposit amount
$(document).ready(function(){
$("#ArrivalRoomRate" ).change(function() {
alert('test');
});
});
//populates the room rate when the room is selected
$this->Js->get('#ArrivalRoomId')->event('change',
$this->Js->request(array(
'controller'=>'Arrival',
'action'=>'getRoomRate'
), array(
'update'=>'#room_rate_update',
'async' => true,
'method' => 'post',
'dataExpression'=>true,
'data'=> $this->Js->serializeForm(array(
'isForm' => false,
'inline' => true
))
))
);
Here is the view for the JS helper POST request
//room_rate_update.ctp
<div class="input text required">
<label for="ArrivalRoomRate">Room Rate </label><input name="data[Arrival][room_rate]" maxlength="10" type="text" id="ArrivalRoomRate" required="required" value="<?php echo $room_rate; ?>">
</div>
So, as I stated. Prior to selecting a room_id, the "test" is triggered. After I select a value

Answer 1

You should have another function, for instance :
function init ()
{
$("#ArrivalRoomRate" ).change(function() {
alert('test');
});
}
After all content refreshed, then call it once. Otherwise, when all content refreshed, this event handler will be invalid for new content, coz it's partial rendering.

Answer 2

You can try with a delegate(aka live) event handler like following:
$(document).ready(function(){
$("body" ).on("change", "#ArrivalRoomRate", function() {
alert('test');
});
});
If you have problem with .on() with jQuery version, then you can use .live() with old jQuery like following:
$("#ArrivalRoomRate").live("click", function() {
alert("test");
});