Question

我正在接受挑战＆＃39;在呈现Ajax响应之后使用JQuery代码。这是我的JQuery代码。

$(document).ready(function () {    
$.ajax({
                type: "POST",
                url: "/somedomain/shoppingcart/add",
                data: { "name": name},
                success: function(data) {
                    $.get("/some-domain/shoppingcart/show", function(cart){ 
                        $(".shopping-cart").html(cart); 
                    });
                }
            }); 



    $(".shopping-cart").on('click','#orderDate', function() {
            $("#orderDate").datetimepicker({
                format: 'DD-MM-YYYY',
                minDate: date,
                locale: 'nl'
            });
        });
});

<div class='input-group date' id='orderDate'>
  <input type='text' class="form-control" />
     <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
     </span>
</div>

问题是我必须在datepicker上单击两次直到它打开，这种行为只在使用上面的代码时才会发生。我错过了什么？

Answer 1

每次点击$(document).ready()时，都会重新绑定datepicker事件。您只需要绑定一次datepicker。您可以通过将其放入$(document).ready(function() { $("#orderDate").datetimepicker({ format: 'DD-MM-YYYY', minDate: date, locale: 'nl' }); });函数：

来实现此目的

success: function(data) {
         $.get("/some-domain/shoppingcart/show", function(cart){ 
         $(".shopping-cart").html(cart);
         BindDatePicker(); 
       });


function BindDatePicker() {
    $("#orderDate").datetimepicker({
                format: 'DD-MM-YYYY',
                minDate: date,
                locale: 'nl'
    });
}

从我的评论中，您可以在AJAX调用中重新绑定成功函数：

    $( '#resultTable' ).delegate( 'tr', 'click', function ( e ) {
        if ( $( e.target ).is( 'tr' ) || $( e.target ).is( 'td' )) {
            $(this).toggleClass('warning');
            var checkbox = $(this).find('input[type=checkbox]');
            $(checkbox).prop("checked", !checkbox.prop("checked"));
        } else if($(e.target).is( ':checkbox' )) {
            $(e.target).closest('tr').toggleClass('warning');
        }else {
                console.log("select " +e.target);
        }
});

Answer 2

您需要在延迟一段时间后在ajax响应中初始化日期选择器控件，因为dom可能在初始化时不会更新。因此，将settimeout置于成功函数中，然后将日期选择器初始化。

Ajax响应datetime-picker单击事件未绑定

2 个答案: