Функции JQuery не работают с компонентом динамической сгенерированной формы?

Я использую эту функцию JQuery с JQuery UI для создания DatePicker, когда пользователь нажимает одну текстовое поле:Функции 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>

Как вы можете видеть, что это ответ на TextFields от и в , Текстовые поля находятся в моем 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>

Когда пользователь клонировать элементы, а новые не реагируют на функцию, которая генерирует DatePicker. Я действительно смущен этим. Здесь вы можете проверить работает код:http://domingo.net46.net/example/reg.php

источник

2011-09-01 DomingoSL

«Вы видите эту страницу, потому что системный администратор 000webhost.com в настоящее время проверяет этот сайт на наличие вредоносного контента». Кроме этого ... Попробуйте запустить datepicker, когда вы клонируете его. – Henry

ну, во-первых, я бы изменил ваш метод, чтобы искать класс. Элементы клонирования, подобные описанным выше, приведут к тому, что элементы, имеющие тот же идентификатор, не являются наилучшей практикой. –

Вы должны вызвать функцию, которая заставляет datapicker повториться после добавления элементов html, так что функция datepicker работает над ними, потому что я вижу, что функция datepicker вызывается на d ocument ready, и у вас есть другая функция, которая добавляет элемент html, поэтому вам нужно вызвать функцию datepicker сразу после добавления html elemnt.

$(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(); 
    }); 
    });

источник

2011-09-01 08:56:55

Можете ли вы привести пример? Благодаря! – DomingoSL

Я добавил ваш код с обновлениями, необходимыми для выполнения работы. –

Это главная работа, вот полный html-код: http://pastie.org/2466056 и вот ваш код JS: http://pastie.org/2466059 Скажите мне, что вы думаете, если вам нужно, я могу дать вам доступ к моему FTP-серверу, чтобы вы могли его протестировать. Еще раз спасибо за помощь! – DomingoSL

-1

Если клонированные элементы имеют один и тот же id как оригиналы, я не удивлен, что DatePicker будет действовать только на первых элементов, которые он находит.

источник

2011-09-01 08:56:37 Ganske

Вопрос может быть на линии, которая заключается в следующем:

this.value = '';

Попробуйте изменить это, чтобы стать:

$(this).value = '';

Затем он должен работать, как это создает объект JQuery

источник

2011-09-01 08:56:51 JakeJ

Функции JQuery не работают с компонентом динамической сгенерированной формы?

ответ

Смежные вопросы