Question

当从下拉列表中选择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之前，触发“测试”。我选择一个值

Answer 1

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

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

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

Answer 2

您可以尝试使用以下代理（aka live）事件处理程序：

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

如果您使用jQuery版本的.on()有问题，那么您可以将.live()与旧的jQuery一起使用，如下所示：

$("#ArrivalRoomRate").live("click", function() {
  alert("test");
});

使用CakePHP加载DIV后，jQuery更改不会触发

2 个答案: