Добавление атрибута данных в элемент не работает с первой попытки

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть кнопка редактирования внутри td, которая при нажатии открывает модальный. Форма в модальном теле загружается из внешнего файла. Я хотел бы передать значение идентификатора строки в форму. В моей попытке идентификатор не передается при самом первом щелчке (он возвращает undefined), но при последующих он работает отлично.

Вот html-код:

  <button type="button" class="btn" id="edit" 
data-id="<?php echo $row['id'] ;?>"></button>
  

Скрипт:

   $(document).ready(function() {
        $("#tableCountries tbody tr td button.btn").on("click", function() {
            if ($(this).attr("id") == "edit") {
                //fetch row id from button
                var rowid = $(this).data('id');
                //open modal
                var modal = $("#modalCountries").modal();
                //load external form into modal body
                modal.find('.modal-body').load("modal.html #countries_form");
                //add row id value to countries form
                $("#countries_form").attr('data-value', rowid);
                //check value of id
                var newid = $("#countries_form").data('value');
                alert(newid);
             }
        });
    });
  

Я пытался использовать bind() или live() вместо on() , я пытался использовать data() вместо attr() для присвоения идентификатора, я также пытался поместить load() вне оператора if . Ничего из этого не работает. Любая помощь будет оценена.

Ответ №1:

.load() является асинхронным, поэтому вам придется использовать его обратный вызов для запуска кода после его завершения.

 modal.find('.modal-body').load("modal.html #countries_form", function(){
    $("#countries_form").attr('data-value', rowid);
});