0

这是要应用的 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));?>

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

4

3 回答 3

2

始终在页面底部编写 Java 脚本代码。

于 2013-09-24T08:29:01.463 回答
1

要正确使用 jQuery 代码，您必须将代码包装在 $(document).ready() 块周围。如文档中所述，

在文档“准备好”之前，无法安全地操作页面。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>
于 2013-09-23T17:09:30.333 回答
0

终于知道我使用的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();
         }
     }); 
    });
于 2013-09-25T13:45:02.600 回答