使用jQuery添加输入框的jQuery UI选择器添加

我在页面上打印表单。该行包含几个包含表单元素的列。很像一张桌子，但在CSS中。使用jQuery添加输入框的jQuery UI选择器添加

当用户点击ID为add_transaction_row的链接时，会调用一点点jQuery来追加另一行/ div到页面。该行包含与上面的行相同的一组div和表单元素。

我已经命名元素date[], sub_cat_id[]等等，以便我得到一个更新的数组来处理下一页。

我在日期输入框中使用了jQuery datepicker。我有一个类叫.datepicker的触发器。

第一行jQuery日期选择器按预期显示。但是，当我点击下面的行中的任何日期输入框（新行/输入框的jQuery附加添加），然后datepicker不起作用。

我在想，这可能与我对它们的命名完全相同，所以我给它们提供了一个唯一的ID。仍然没有运气。

我现在正在考虑它与jQuery的加入页面加载.datepicker，然后当我点击底部添加一个新行这是添加到源的HTML，但在jQuery的日期选择器已加载后，所以它不选择新的日期/输入框的？

如果有人可以摆脱这种情况，我将不胜感激。

<?php 

    $my_new_split = ''; 
    $my_new_split .= '<div class="split_transaction_box">'; 
    $my_new_split .= '<div class="span-7">' . form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"') . '</div>'; 
    $my_new_split .= '<div class="span-7">' . form_dropdown('sub_cat_id[]', $subcategories_options) . '</div>'; 
    $my_new_split .= '<div class="span-5">' . form_input('reference[]') . '</div>'; 
    $my_new_split .= '<div class="span-4 last">' . form_input('ammount[]') . '</div>'; 
    $my_new_split .= '<div class="clearfix"></div></div><!-- /.split_transaction_box -->'; 

    $my_new_split = trim($my_new_split); 

    $replace_this = array("\r\n", "\n", "\r"); 
    $my_new_split = str_replace($replace_this, '', $my_new_split); 

    $my_new_split = str_replace('"', '\"', $my_new_split); 

?> 

<script> 

    $(document).ready(function() { 

     $('#add_transaction_row').click(function() { 
      $(".split_continer").append("<?=$my_new_split;?>"); 
      return false; 
     }); 
    }); 

</script> 

<hr /> 

<div class="span-24 last"> 

    <?=form_open('accounts/do_split')?> 

    <div class="split_continer"> 

     <div class="split_transaction_box"> 

       <div class="span-7"><?=form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"');?></div> 
       <div class="span-7"><?=form_dropdown('sub_cat_id[]', $subcategories_options);?></div> 
       <div class="span-5"><?=form_input('reference[]');?></div> 
       <div class="span-4 last"><?=form_input('ammount[]');?></div> 


      <div class="clearfix"></div> 
     </div><!-- /.split_transaction_box --> 

    </div><!-- /.split_container --> 

    <br /> 
    <a href="#" class="button" id="add_transaction_row">Add new split</a> 
    <input type="submit" class="button white" value="Save this split" /> 

    <?=form_close()?>

来源

2012-01-17 James Mills

你完全正确，在日期选择器不会对新的元素，因为您要添加这些元素到页面的jQuery附加了日期选择器后工作。我自己遇到过这个问题。我想出了一些做法。

第一种方法是将实时点击处理程序绑定到元素，检查是否应用了日期选择器，如果不应用它。

http://jsfiddle.net/uyx67/1/

但也许一个更好的办法是建立使用jQuery为对象的元素和应用的日期选择这种方式

http://jsfiddle.net/4jmkw/3/

两种方式工作，而做的工作。

来源

2012-01-17 16:07:50 Lee

感谢您的反馈。我最终通过在将新行添加到页面后运行jQuery datepicker来获得它的工作。 '' – 2012-01-18 11:14:32

<script> 

    $(document).ready(function() { 

     $('#add_transaction_row').click(function() { 
      var new_row = jQuery("<?=$my_new_split;?>"); 
      $(".split_continer").append(new_row); 

      $(".datepicker").datepicker({ 
       numberOfMonths: 2, 
       dateFormat: 'DD, d MM, yy' 
      });   

      return false; 
     }); 

    }); 

</script>

来源

2012-01-18 11:16:45

使用jQuery添加输入框的jQuery UI选择器添加

回答

相关问题