0

jQuery datepicker を含むフォーム (4 つの入力) があります。また、ユーザーが複数のレコードを追加できるように、下に別の div (これも jQuery を介して、同じ 4 つの入力) を追加するボタンもあります。日付ピッカーは最初のフォームでは機能しますが、後続のフォームでは機能しません...

意見

<div id="single_module">
<div class="pitch">
<h2>Step 3: Friends Birthdays</h2>
</div>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<%= simple_form_for @user, url: wizard_path do |f| %>

  <div class="inputs">
  <ul class="testss1">
  <%= f.simple_fields_for :friends do |friend_f| %>
    <li>
    <%= friend_f.input :name %>
    </li>
    <li>
    <%= friend_f.input :dob, :as => :date_picker, :label => 'Birthday' %>
    <li>
    <%= friend_f.input :gender, :collection => ['male','female'] %></li>
    </li><li>
    <%= friend_f.association :interests, :as => :select, :label => false %></li>


    <%end%>

    </div>
    <div>
    <input type="button" id="btnAdd" value="add another name" />
    <input type="button" id="btnDel" value="remove name" />
    </div>
    </form>
    <div class="actions">
    <%= f.button :submit, 'Next Step', :class => 'btn btn-primary',  %>
    <br></br>
    </div>
    <%end%>

Jクエリ:

デートピッカー

$(document).ready(function(){
    $(function() {
            $( "#user_friends_attributes_0_dob" ).datepicker();

        });
});

新しいフォームを追加:

$(document).ready(function() {
           $('#btnAdd').click(function() {
               var num     = $('.clonedInput').length;
               var newNum  = new Number(num + 1);

               var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

               newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
               $('#input' + num).after(newElem);
              $('#btnDel').attr('disabled',false);

               if (newNum == 5)
                   $('#btnAdd').attr('disabled',true);
           });

           $('#btnDel').click(function() {
               var num = $('.clonedInput').length;

               $('#input' + num).remove();
               $('#btnAdd').attr('disabled',false);

               if (num-1 == 1)
                   $('#btnDel').attr('disabled',true);
           });

           $('#btnDel').attr('disabled',true);
       });
4

2 に答える 2

2

対象となる要素の DOM イベントを動的に処理し、その日付ピッカー機能を再バインドするように jQuery に「指示」する必要があります。「my-datepicker」などの任意の日付ピッカー要素に css クラスを追加することから始めます。次に、イベントで日付ピッカー機能をバインドするように DOM に指示します (例: mousenter):

$(function() {
     $("#myForm").delegate('.my-datepicker', 'mouseenter', function(){
        $(this).datepicker();
     });
})

上記は、「myForm」の ID を持つ要素内にあるクラス「my-datepicker」を持つ要素の mouseenter イベントに応答するように DOM に指示します。これにより、その要素に datepicker 機能が追加されます。

また、スクリプトに冗長性があることにも気付きました。次の行です。

 $(document).ready(function(){...})

と

 $(function(){...})

まったく同じことを行いますが、それらは互いにネストされています。それが問題を引き起こすかどうかはわかりませんが、どちらか一方しか使用しません。

実行している jQuery のバージョンに応じて、jQuery.live() または jQuery.on() を使用することもできます。.delegate() は 1.4.3+ で機能し、.on() は 1.7+ で機能します

于 2012-05-25T20:05:33.167 に答える
0

datepicker()最も簡単な方法-の最後に新しく作成された日付フィールドを再度呼び出します$('#btnAdd').click。また、より正確な解決策についても同様の質問があります。jQueryUIの日付ピッカーが動的DOMで機能しないのはなぜですか。。

そして、あなたは車輪を再発明しています：あなたの場合、あなたはhttps://github.com/ryanb/nested_formまたはhttps://github.com/nathanvda/cocoonを使うことができます。（ただし、動的日付ピッカーの問題を解決する必要があります）

于 2012-05-25T18:26:10.423 に答える