JQuery $ ('form'). Serialize () не работает после $ ('div.container'). Load () - PullRequest
Новая
       13

JQuery $ ('form'). Serialize () не работает после $ ('div.container'). Load ()

0 голосов
/ 20 сентября 2018

У меня есть страница с div, которая обновляется с помощью вызова AJAX, например: 

<body>
    <div id="container">
        <div id="newinfo">
            <form id="selectform">
                Your name:<br>
                <input type="text" name="firstname"><br>
            </form> 
        </div>
    </div>
    <script>
        function reload_container() {
            $('#container').load('url/to/ajax/update');
            console.log($('#selectform').serialize());
        }
    </script>
</body>

Ответ загрузки идентичен (включая идентификатор формы), но с другим содержанием.

Если я запускаю reload_container(); с консоли отладки в Firefox, однако функция serialize() пуста, но $('#selectform') определена.

Однако мне нужно содержимое формы.Я не знаю, почему селектор $('#selectform') работает после перезагрузки, но serialize() не работает.Любая помощь приветствуется.

Обратите внимание, что входные данные формы содержат тег имени. Сериализация jQuery не работает не имеет значения.

Обновление: события, связанные с элементами в контейнере, не работают и после load ().Например, $('#newinfo').click(function(){alert('hi!'}); в скрипте загрузки тела.Однако эта проблема решается методом jQuery .live () и .on () для добавления события щелчка после загрузки динамического html

.

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Это, кажется, работает нормально.Возможно, в вашем обработчике ajax что-то не так.Надеюсь, этот пример поможет вам.Также приведен пример с делегированным событием input для элемента ввода.

Пожалуйста, предоставьте ваш обработчик ajax, если вам нужна помощь с этим. 

//define delegate event so it triggers after inserting new elements (with ajax) too.
$('#newinfo').on('input', 'input[name=firstname]', function(){
  console.log($(this).val());
});

//attach the reload_container function to the button for testing purpose
$('#reload').on('click', reload_container);

//This function mimics the result of your ajax request assuming you do something like this. It updates the form with a new form and run the serialize function on it.
function reload_container() {
  var ajaxResultMimic = '<form id="selectform">Your name:<br><input type="text" name="firstname" value="updated"><br></form>';
  $('#newinfo').html(ajaxResultMimic);
  console.log($('#selectform').serialize());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="reload">reload</button>
    <div id="container">
        <div id="newinfo">
            <form id="selectform">
                Your name:<br>
                <input type="text" name="firstname"><br>
            </form> 
        </div>
    </div>
</body>
0 голосов
/ 20 сентября 2018

Вы должны выполнить свой код в обработчике завершения загрузки. 

$('#container').load('url/to/ajax/update', function() {
  console.log($('#selectform').serialize());
});

Проверьте примеры здесь http://api.jquery.com/load/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...