如果我单击模态中的任何位置，则传递给 bootstarp 模态文本框的数据在加载模态后会自动休息

Question

嗨，我正在尝试在引导模式中制作表单。此模式将根据 href 单击事件打开。这个 href 标签将使用 Jquery 在 ajax 调用中动态生成。

下面列出了 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标签具有相同的 ID。

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

因此，事件$(document).on("click", "#addvideo", function () {... })将在这两个元素上触发。当$(this)引用表单时，您的数据未定义/为空。

只需重命名您的表单 ID，它应该可以工作。