使用数据属性将数据传递给模态并在该模态内使用日期选择器而不会丢失数据属性数据

Question

我在使用数据属性将数据传递到模态并在该模态内使用日期选择器时遇到问题。当我这样做时，一旦我单击日期选择器输入，我通过数据属性传递给其他输入的所有数据都会被清除。任何人都可以解释这是怎么发生的吗？有没有办法解决这个问题？

我的代码如下

<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/

使用数据属性将数据传递给模态并在该模态内使用日期选择器而不会丢失数据属性数据

Using data attribute to pass the data to a modal and use datepicker inside that modal without loosing data attributes data

javascript

jquery

twitter-bootstrap-3

bootstrap-datepicker