У меня есть страница с 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 () vs .on () для добавления события клика после загрузки динамического HTML

0
L.A. Rabida 20 Сен 2018 в 10:27

2 ответа

Лучший ответ

Кажется, это нормально работает. Вероятно, что-то не так с вашим обработчиком 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
Mark Baijens 20 Сен 2018 в 08:49

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

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

Примеры см. Здесь http://api.jquery.com/load/

0
CodeThing 20 Сен 2018 в 07:34