0

当从下拉列表中选择 room_id 时，我使用 JS 助手来填充 security_deposit 和 room_rate 输入。问题是，如果我选择 room_id，room_rate_update jQuery 更改函数将停止工作。但是，当页面加载并且我没有选择 room_id 时，我可以输入 room_rate 框并触发它，但不是在我选择 room_rate 之后。

我认为可能导致这种情况的一件事是，当我选择 room_id 时，包含 room_rate 的整个 div 都会更新。它以前是由 CakePHP 表单助手生成的，但是，我确保 div 被替换为完全相同的名称、类、id 等......它与页面加载时出现的相同

这是我认为的表格

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'));

这是用于更新的 JS 助手和 jQuery 函数

//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
            ))
        ))
);

这是 JS 助手 POST 请求的视图

//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>

所以，正如我所说。在选择 room_id 之前，会触发“测试”。在我选择一个值之后

4

2 回答 2

1

你应该有另一个功能，例如：

function init ()
{
    $("#ArrivalRoomRate" ).change(function() {
        alert('test');
    });
}

刷新所有内容后，再调用一次。否则，当所有内容刷新时，此事件处理程序将对新内容无效，因为它是部分呈现。

于 2013-09-09T06:19:16.357 回答
0

您可以尝试使用委托（又名实时）事件处理程序，如下所示：

$(document).ready(function(){
    $("body" ).on("change", "#ArrivalRoomRate", function() {
        alert('test');
    });
});

如果您对.on()jQuery 版本有疑问，那么您可以使用.live()旧的 jQuery，如下所示：

$("#ArrivalRoomRate").live("click", function() {
  alert("test");
});
于 2013-09-07T06:52:08.883 回答