我试图在呈现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更改<表> < 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的元素.