Question

Here是要应用的html和javascript。片段取自cakePHP生成的html和视图文件中包含的javascript。一切都在jsfiddle中按预期工作，但是没有在cakePHP应用程序中触发任何操作。

javascript被粘贴在视图文件的顶部，如下所示：

<script type="text/javascript">
  $('#repeat').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#end-date').show();
     } else {
         $('#end-date').hide();
     }
 }); 
</script>

表格如下：

<?php echo $this->Form->create('Event');?>

        <legend><?php __('Add Event'); ?></legend>

        <div id="first_input">
        <fieldset>
    <?php   
        echo $this->Form->input('project_id', array('label'=>'Project name')); 
        echo $this->Form->input('user_id', array('label'=>'Employee'));
        echo $this->Form->input('hours', array('type'=>'text','size'=>'3'));
        echo $this->Form->input('minutes', array('type'=>'text', 'size'=>'3')); ?>
    </fieldset>
        </div>
        <div id="second_input">
    <fieldset>

    <?php   
        echo $this->Form->input('assignment', array('type'=>'textarea'));
        echo $this->Form->input('date', array('label' => 'Date', 'class'=>'datepicker', 'type'=>'text', 'value'=>$date));
        echo $this->Form->input('start_time', array('label'=>'Start Time', 'timeFormat' => '24', 'interval'=> '10', 'selected' => '00:00'));
        echo $this->Form->input('finish_time', array('label'=>'Finish Time (Not required)', 'timeFormat' => '24', 'interval'=> '10', 'selected' => '00:00')); 
        echo $this->Form->checkbox('Repeat', array('id'=>'repeat'));?>
    <div id="end-date" style="display:none">
        <?php
        echo $this->Form->input('finish_date', array('label' => 'End Date', 'class'=>'datepicker', 'type'=>'text', 'id' => 'end-date'));
        echo $this->Form->select('weekdays', array('1'=>'Monday', '2'=>'Tuesday', '3'=>'Wednesday', '4'=>'Thursday', '5'=>'Friday', '6'=>'Saturday', '7'=>'Sunday'), array('multiple'=>'checkbox'));?>
    </div>
    </fieldset>
        </div>
<?php echo $this->Form->end(__('Submit', true));?>

我真的很期待得到一些如何解决这个问题的提示。

Answer 1

始终在页面底部编写Javascript代码。

Answer 2

要正确使用jQuery代码，必须将代码包装在$（document）.ready（）块周围。如documentation中所述，

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。

尝试将您的JS代码更改为：

<script type="text/javascript">
    $(document).ready(function() {
      $('#repeat').live('change', function(){
          if ( $(this).is(':checked') ) {
             $('#end-date').show();
         } else {
             $('#end-date').hide();
         }
     }); 
    });
</script>

Answer 3

最后我知道在我使用的jQuery版本（1.10.2）中不支持'live'，它应该已经改为'on'。所以这一切都很好，这里是更新版本的jQuery的正确代码：

 $(document).ready(function() {
      $('#repeat').on('change', function(){
          if ( $(this).is(':checked') ) {
             $('#end-date').show();
         } else {
             $('#end-date').hide();
         }
     }); 
    });

Javascript未在cakePHP中应用

3 个答案: