使用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選擇器添加

回答

相關問題