Datepicker & автозаполнение после replaceWith () не работает

Question

Datepicker & автозаполнение после replaceWith () не работает

0

Я сталкиваюсь с немой проблемой между datepicker/autocomplete и replacewith(). У меня есть форма, в которой пользователи могут добавлять несколько строк и удалять их. Чтобы сделать такое, я установил клонирование. После клонирования я делаю replaceWith(), чтобы изменить имена входов, поскольку функция attr делает глупые вещи с IE, заменяя имя SubmitName.

Функция replacewith отлично работает, но функция datepicker или функция автозаполнения больше не работают. FYI, этот блок находится сразу после формы HTML. Я попробовал его несколькими способами, как показано ниже, но никто не работает:

<script type="text/javascript">
var uniqueLeg = 1;
$('.addLeg').click(function() {
    var copy = $('#Leg').clone(true,true);
    var formId = 'Leg' + window.uniqueLeg;
    copy.attr('id', formId );
    copy.removeAttr('style');

    copy.find(':input#tripdate').each(function() {
        $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='tripdate" + window.uniqueLeg + "' name='" + $(this).attr("name") + window.uniqueLeg + "' class='datepicker' />");
        $('.datepicker').datepicker({ dateFormat: "dd/mm/yy" });
    });
$('#trip').append(copy);
window.uniqueLeg++;
});

или

    copy.find(':input#tripdate').each(function() {
        $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='tripdate" + window.uniqueLeg + "' name='" + $(this).attr("name") + window.uniqueLeg + "' class='datepicker' />");
        $(this).datepicker({ dateFormat: "dd/mm/yy" });
    });

или

    copy.find(':input#tripdate').each(function() {
        $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='tripdate" + window.uniqueLeg + "' name='" + $(this).attr("name") + window.uniqueLeg + "' class='datepicker' />");
        $('tripdate'+window.uniqueLeg).datepicker({ dateFormat: "dd/mm/yy" });
    });

никто не работает. Jquery-ui объявляется в верхней части страницы

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <TITLE> Dev page </TITLE>
    <link rel="stylesheet" href="src/jquery-ui.css" />
    <script src="src/jquery-1.9.1.js"></script>
    <script src="src/jquery-ui.js"></script>
    <SCRIPT language="javascript">
$(function() {
            $( ".datepicker" ).datepicker({ dateFormat: "dd/mm/yy" });
            $( ".aptsearch" ).autocomplete({source:'suggest_apt.php', minLength:3});
            $( ".actsearch" ).autocomplete({
                source:'suggest_act.php', 
                minLength:3,
                select: function (event, ui) { 
                    var id = $(this).attr("id");
                    loadAC(ui.item.value, id); 
                }
            });
        });...

Кроме того, даже функция addClass или RemoveClass не работает. Пожалуйста, посоветуйте, я не вижу, чего не хватает. Предложения приветствуются.

Структура html до строк новостей

<INPUT id=tripdate0 class="datepicker hasDatepicker" name=tripdate0 jQuery191007588717778684739="15">

после строк новостей

<INPUT id=tripdate1 class=datepicker name=tripdate1>

poypoy 19 дек. 2013, в 14:21

Источник

0

Вы получаете какую-либо ошибку в консоли? еще одна вещь, почему вы делаете несколько вызовов .datepicker() , так как вам это нужно для всех вновь добавленных строк, вы можете вызвать его один раз в $(document).ready() . если это возможно, вы можете опубликовать HTML структуру после добавления новых строк
dreamweiver 19 дек. 2013, в 13:26
0

Я не получаю никаких ошибок, но автозаполнение и указатель даты не работают на добавленных строках. Что касается $ (document) .ready (function) {это не заменяет тот факт, что .datepicker () должен быть вызван снова после клонирования. Я просто попробовал, и без этого не получилось.
poypoy 19 дек. 2013, в 16:01

Теги:

jquery

datepicker

jquery-ui

autocomplete

replacewith

1 ответ

Ещё вопросы

Вы получаете какую-либо ошибку в консоли? еще одна вещь, почему вы делаете несколько вызовов .datepicker() , так как вам это нужно для всех вновь добавленных строк, вы можете вызвать его один раз в $(document).ready() . если это возможно, вы можете опубликовать HTML структуру после добавления новых строк
Я не получаю никаких ошибок, но автозаполнение и указатель даты не работают на добавленных строках. Что касается $ (document) .ready (function) {это не заменяет тот факт, что .datepicker () должен быть вызван снова после клонирования. Я просто попробовал, и без этого не получилось.

poypoy · Answer 1 · 2013-12-20T07-35-00.000Z

Хорошо, я выяснил, в чем проблема. AddClass и.datepicker не могут работать над функцией, в которой идентификатор ввода был изменен с помощью замены. Единственный способ исправить это - добавить дополнительную функцию после этого, которая выбирает новый измененный ввод и добавляет класс datepicker + initialize.datepicker()

Выглядит немного грязно, но работает как минимум. Если у вас есть предложения по улучшению этого, не стесняйтесь поделиться им :)

    copy.find(':input#tripdate'+window.uniqueLeg).each(function() {
        $(this).addClass('datepicker');
        $(this).datepicker({ dateFormat: "dd/mm/yy" });
    });