Question

我只是陷入了一点尴尬的境地。我正在使用bootstrap模式在我的页面上显示表单。以前每次打开模态时都会保留旧数据。所以我在我的代码中添加了这一行

 $(".modal").on("hidden.bs.modal", function(){
    $(".modal-body").html("");
});

现在它第一次显示正确的数据，但第二次它在我的模型中没有显示任何内容。下面是我的型号代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="closeTab" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">add holiday</h4>
            </div>

            <div class="modal-body">
            <form action="" id="holidayForm">
             <h3> <label id="addHoliday"><span class="label label-info">date</span></label>  </h3>

            <h3> <label id="holidayDetail"><span class="label label-info">description</span></label> </h3>
              <input class="form-control input-lg" id="inputlg" placeholder="description" type="text">
              </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" id="saveChanges" class="btn btn-primary">Save changes</button>
            </div>

        </div>
    </div>
</div>

这是代码弹出引导程序

$('.clickMe').click(function(){
    var clickId=$(this).attr('id');
    var myDate=clickId.toString().substr(0,2);
    var myMonth=clickId.toString().substr(2,4);
    $("#addHoliday").append("<h3><input type='text' name='newDate' disabled='disabled' id='newDate'value="+this_year+"-"+myMonth+"-"+myDate+"></input></h3>");
    $("#myModal").modal('show');


})

请让我知道出了什么问题

Answer 1

一个快速解决方案......

要清除表单字段，您可以执行以下操作

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body #holidayForm input").val("");
});

每次触发.clickMe点击事件时，您都会附加一个新的输入字段。我会将.html代码与.modal-body中的输入字段放在您想要的位置，然后将#addHoliday行的附加替换为类似的内容。

$(".modal-body #holidayForm #newDate").val(this_year + "-" + myMonth + "-" + myDate);
$(".modal-body #holidayForm #inputlg").val("");

<强>更新

在回复您的评论时，请将模态正文中的#addHoliday的html更改为此。

         <h3> 
             <label id="addHoliday">
             <span class="label label-info">date</span>
             <h3><input type="text" name="newDate" id="newDate" value=""/></h3>
             </label>
         </h3>

这样你就有了一个newDate输入字段，click事件正在更新.modal-body中的那个字段

有意义吗？

bootstrap模式不显示数据

1 个答案: