2011-09-01 66 views
0

我使用的是jQuery UI的這個jQuery函數生成一個日期選擇器當用戶點擊文本框一個:Jquery函數不適用於動態生成的表單組件?

<script> 
     $(function() { 
     var dates = $("#from, #to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      changeYear: true, 
      numberOfMonths: 1, 
      onSelect: function(selectedDate) { 
       var option = this.id == "from" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat, 
         selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
     }); 
    }); 
    </script> 

正如你可以看到它的文本框迴應 。該文本框是在我的html代碼,如:

<div class="clearfix"> 
      <label for="from">From</label> 
      <input type="text" id="from" name="from" class="xlarge"/> 
     </div> 
     <div class="clearfix"> 
      <label for="to">to</label> 

在這一點上一切正常。後來,在相同的形式讓用戶克隆使用這個其他代碼這種形式的元素:

$(document).ready(function() { 
    var removeButton = '<a href="#" id="remove">remove</a>'; 
     $('#addl').click(function() { 
     $('div.jobitems:last').after($('div.jobitems:first').clone()); 
     $('div.jobitems:last').append(removeButton); 
     $('div.jobitems:last input').each(function(){ 
      this.value = ''; 
     }); 

    }); 
    $('#remove').live('click', function() { 
     $(this).closest('div.jobitems').remove(); 
    }); 
    }); 
       <input type="text" id="to" name="to" class="xlarge"/> 
      </div> 

當用戶克隆的元素,將新的不來生成的日期選擇器功能響應。我對此很困惑。 在這裏,您可以查看運行的代碼:http://domingo.net46.net/example/reg.php

+0

「您正在看到此頁面,因爲000webhost.com的系統管理員當前正在檢查本網站的惡意內容。」除此之外......嘗試在克隆時運行datepicker。 – Henry

+0

首先,我會改變你的方法來尋找一個類。像上面這樣的克隆元素會導致具有相同ID的項目不是最佳實踐。 –

回答

2

應該工作你必須調用這個函數,使得數據添加器在html元素的追加後再次發生,以便datepicker對它們起作用,因爲我可以看到d上調用了datepicker函數準備好了,並且你有另外一個附加html元素的函數,所以你必須在添加html元素後立即調用datepicker函數。

$(DoAction); 

function DoAction() { 
     var dates = $("#from, #to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      changeYear: true, 
      numberOfMonths: 1, 
      onSelect: function(selectedDate) { 
       var option = this.id == "from" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat, 
         selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
     }); 
    } 




$(document).ready(function() { 
    var removeButton = '<a href="#" id="remove">remove</a>'; 
     $('#addl').click(function() { 
     $('div.jobitems:last').after($('div.jobitems:first').clone()); 
     $('div.jobitems:last').append(removeButton); 
     $('div.jobitems:last input').each(function(){ 
      this.value = ''; 
     }); 
      DoAction(); 

    }); 
    $('#remove').live('click', function() { 
     $(this).closest('div.jobitems').remove(); 
    }); 
    }); 
+0

你能舉個例子嗎?謝謝! – DomingoSL

+0

我添加了您的代碼並完成工作所需的更新。 –

+0

它的工作,這裏是完整的html代碼:http://pastie.org/2466056和在這裏你的JS代碼:http://pastie.org/2466059告訴我你的想法,如果你需要,我可以給你訪問我的FTP服務器,以便測試它。再次感謝您的幫助! – DomingoSL

-1

如果克隆的元素具有相同的id的原件,我並不感到驚訝的是,日期選擇器只能在它找到的第一個元素行事。

0

的問題可能是在作爲行,如下所示:

this.value = ''; 

嘗試改變這成爲:

$(this).value = ''; 

然後它,因爲它是創造一個jQuery對象