javascript – 在jQuery datepicker中发出绑定点击事件

我试图在呈现jQuery datepicker之后将click事件绑定到.ui-state-default(我没有对创建datepicker的html进行任何控制,因此我不能使用任何datepicker特定事件)和使用$.bind()可以正常工作,但不能使用$.on().

在控制台中工作的$.bind():

$('[data-handler=selectDay] a.ui-state-default').bind('click', function(){
        if($(this).hasClass('ui-state-active')) return;
        alert('changed date');
        $("button.checkout").addClass('disabled');
        $("button.checkout span").html('Choose Your Payment Method');
        $(".stage3").html(tmpl('stage3_tpl')).removeClass('noBg');
});

$.on()在页面上不起作用:

$(document.body).on('click', '[data-handler=selectDay] a.ui-state-default', function(){
        if($(this).hasClass('ui-state-active')) return;
        alert('changed date');
        $("button.checkout").addClass('disabled');
        $("button.checkout span").html('Choose Your Payment Method');
        $(".stage3").html(tmpl('stage3_tpl')).removeClass('noBg');
});

datepicker并不总是在页面上,所以我不相信我可以使用$.bind()?

我哪里错了?

解决方法:

这与DOM更改有关. jQuery.on()方法绑定到现有的DOM元素,这就是为什么它不适用于动态添加的日期选择器元素.

jQuery Documentation: Event handlers are bound only to the
currently selected elements; they must exist on the page at the time
your code makes the call to .on()

jQuery.bind()也适用于现有元素.因此它适用于附加到DOM的第一个,但不会动态附加其余的.

解决方案是使用MutationObserver监听DOM更改并允许您做出相应的反应.有一个很好的jQuery插件叫做’Live Query‘,它简化了为DOM中的特定元素创建Mutation Observers的过程.

例如,使用jQuery.livequery()的代码如下所示:

$('body').livequery(
    'table td[data-handler=selectDay] a.ui-state-default',
    function(elem){
        if( jQuery(elem).hasClass('ui-state-active') ) return;
        jQuery(elem).on('click', function(){
            $("button.checkout").attr('disabled','disabled').addClass('disabled');
            $("button.checkout span").html('Choose Your Payment Method');
        });
    }
);

它将在< body>中监听DOM更改&LT表> < td data-handler =“selectDay”]< a class =“ui-state-default”>然后根据单击元素进行相应操作.

这是一个工作示例:http://jsfiddle.net/laelitenetwork/ej96f7m5/

/**
 * Livequery listen for DOM mutation events
 * this allows to keep listening date picker
 * events, even after being dynamically appended to
 * DOM
 */
$('body').livequery(
    'table td[data-handler=selectDay] a.ui-state-default',
    function(elem){
        if( jQuery(elem).hasClass('ui-state-active') ) return;
        jQuery(elem).on('click', function(){
            $("button.checkout").attr('disabled','disabled').addClass('disabled');
            $("button.checkout span").html('Choose Your Payment Method');
        });
    }
);
$('.clean').on('click', function(){
    /** 
     * Reset testing playground
     * This simulates dynamic DOM Mutation
     */
    jQuery('.wrap').empty();
    jQuery('.wrap').append('<input type="text" class="date-picker"/>');
    jQuery('button.checkout').attr('disabled',false);
    jQuery('button.checkout span').html('Checkout');
    $(function() {
        $( ".date-picker" ).datepicker();
    });
});
// Run datepicker
$(function() {    
    $( ".date-picker" ).datepicker();
});
.wrap {
    border: 1px solid #fefefe;
    background: #fafafa;
    text-align: center;
}
.wrap input {
    border: 1px solid #fcfcfc;
    padding: .5em;
    font-size: 1.1em;
    text-align: center;
    background: #f1f1f1;
}
.buttons {
    text-align: center;
    background: #fbfbfb;
}
.checkout {
    background: #ee5555;
    color: #fff;
    border: 0;
}
button:disabled {
    background: #efefef;
    color: #999;
    border: 1px solid #ccc;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://staticelite.info/elitenetwork/scripts/jquery.livequery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="wrap">
    <input type="text" class="date-picker"/>
</div>
<div class="buttons">
    <button class="clean">Clean</button> | 
    <button class="checkout"><span>Checkout</span></button>
</div>

P.S:单击Clean将模拟动态附加到DOM的元素.

上一篇:javascript – JQuery datepicker set defaultvalue


下一篇:javascript – jQuery:datepicker,提醒所选的日期名称