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

Question

Привет, я пытаюсь сделать форму в начальной загрузке модальных. Этот модал откроется на основе события клика href. Этот тег href будет сгенерирован динамически в вызове ajax с использованием Jquery.

формат тега href ниже для вызова модального загрузчика.

'<a id="addvideo" data-toggle="modal" data-title="'+field.title+'" data-id="'+field.video_id+'" data-desc="'+field.description+'" data-channelname="'+field.channel_name+'" data-yudate="'+field.created_date+'" href="#form-content">'+field.title+'</a>'

Модал, который я называю, показан ниже.

                <div id="form-content" class="modal hide fade in" style="display: none;">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Add Video</h3>
                    </div>
                    <div class="modal-body">
                        <form name="addvideo" action="#" id="addvideo">
                            <label>Title</label>
                            <input type="text" id="videotitle" name="videotitle" value="" /><br />
                            <label>Video ID</label>
                            <input type="text" id="videoid" name="videoid" value="" /><br />
                            <label>Description</label>
                            <textarea name="videodesc" id="videodesc"></textarea><br />
                            <label>Channel</label>
                            <input type="text" id="channelname" name="channelname" value="" /><br />
                            <label>Actors</label>
                            <input type="text" id="actors" name="actors" value="" /><br />
                            <label>Directors</label>
                            <input type="text" id="directors" name="directors" value="" /><br />
                            <label>Producers</label>
                            <input type="text" id="producers" name="producers" value="" /><br />
                            <label>Order Number</label>
                            <input type="text" id="orderno" name="orderno" value="" /><br />
                            <label>Youtube Updated Date</label>
                            <input type="text" id="yudate" name="yudate" value="" /><br />
                            <label>CMS Updated Date</label>
                            <input type="text" id="cudate" name="cudate" value="" /><br />
                            <label class="checkbox">
                            <input type="checkbox" id="hidevideo"> Hide video in mobile app
                            </label>
                            <button class="btn btn-success" id="submit"><i class="icon-white icon-ok"></i> Submit</button>
                            <button class="btn btn-inverse"><i class="icon-white icon-circle-arrow-left"></i> Cancel</button>
                         </form>
                    </div>
                </div>

Теперь для вызова модального режима на основе клика я использую приведенный ниже код JavaScript и только в этом коде я передаю данные в модальный режим, устанавливая текстовые поля в модальном режиме с использованием Jquery, как показано ниже.

$(document).on("click", "#addvideo", function () {
 var videoid = $(this).data('id');
 var videotitle = $(this).data('title');
 var videodesc = $(this).data('desc');
 var channelname = $(this).data('channelname');
 var yudate = $(this).data('yudate');

 $(".modal-body #videoid").val( videoid );
 $(".modal-body #videotitle").val( videotitle );
 $(".modal-body #videodesc").val( videodesc );
 $(".modal-body #channelname").val( channelname );
 $(".modal-body #yudate").val( yudate );
});

Теперь мой модал нормально загружается, и значения отображаются в назначенных текстовых полях, как только модал загружается при нажатии на тег href. Но если я нажимаю на модальное после загрузки, значения в текстовых полях автоматически сбрасываются в пустые значения.

Answer 1

Ваш form иметь тот же идентификатор, что и ваш a тег.

<a id="addvideo" ...>
<form name="addvideo" action="#" id="addvideo">

Итак, событие $(document).on("click", "#addvideo", function () {... }) сработает на обоих элементах. когда $(this) ссылается на форму, ваши данные не определены / пусто.

Просто переименуйте ваш идентификатор формы, и он должен работать.