Question

使用data属性将数据传递到模式并在该模式内部使用datepicker时遇到问题。当我这样做时，只要单击日期选择器输入，我通过data属性传递给其他输入的所有数据都将清除。谁能解释这是怎么回事，有没有办法解决这个问题？

我的代码如下。

<i class="btn icon-md icon-pencil" data-toggle="modal" data-target="#edit_data_modal" data-bundle_id="1"></i>

<div class="modal bs-example-modal-lg inmodal" id="edit_data_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">

            </div>
            <form method="post" id="edit_form" action="" class="form-horizontal">
                <div class="modal-body">
                    <input type="text" class="form-control" name="bundle_id" id="bundle_id" required>
                    <input type="text" class="form-control date-picker" name="start_date" required>
                    <input type='submit' value='Save'>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$('.date-picker').datepicker({
    orientation: "top auto",
        format: "yyyy-mm-dd",
        autoclose: true
});

$('#edit_data_modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
        var bundle_id = button.data('bundle_id'); // Extract info from data-* attributes
    var modal = $(this);
    modal.find('.modal-body #bundle_id').val(bundle_id);
});
</script>

JS Fiddle

Answer 1

您可能必须将按钮与模式正确分开。您确定相关目标与您的按钮匹配吗？顺便说一下，在jquery中，无需在此行中指定多个选择器：

modal.find('.modal-body #bundle_id').val(bundle_id); --> modal.find('#bundle_id').val(bundle_id); // Should be sufficient

这是正在工作的JSFiddle：https://jsfiddle.net/j8wzen73/6/

使用data属性将数据传递到模式，并在该模式内使用datepicker而不丢失数据属性data

1 个答案: