在页面加载后加载的元素上使用jquery
问题描述：
我想检查一个按钮是启用还是禁用，但该按钮是在页面加载后添加的。我怎样才能做到这一点？在页面加载后加载的元素上使用jquery
我的代码需要在禁用按钮时显示消息，并在代码启用时删除消息。
我的代码：
jQuery(document).ready(function() {
"use strict";
if(jQuery('#checkoutbtn').prop(':disabled')){
console.log('disabled');
jQuery("#voorwaarden").css("display", "inline-block");
}else{
console.log('enabled');
jQuery("#voorwaarden").css("display", "none");
}
});
我的HTML代码：
<div class="checkoutvoorwaarden" id="voorwaarden">Ga akkoord met onderstaande voorwaarden om door te gaan:</div>
<button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button>
<p><input type="checkbox" class="checkbox chk" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em style="color:#ff2727;">*</em></b></p>
<p><input type="checkbox" class="checkbox chk" id="geboorte" style="display:inline;"/><b> Ik ben ouder dan 18 jaar <em style="color:#ff2727;">*</em></b></p>
我的jQuery的，只有当这样写的（包裹文件内）工程的一部分：
jQuery(document).on('change','.chk', function() {
var checkCount=jQuery('.chk:checked').length;
var totalCheckbox =jQuery('.chk').length;
totalCheckbox==checkCount ? jQuery("#checkoutbtn").prop('disabled', false):jQuery("#checkoutbtn").prop('disabled', true);
});
但我不知道如何使用.on('change')作为.is(:disabled)属性。
答
你可以换你的代码中document.ready。它会创建的按钮后执行，这意味着整个文件加载
$(document).ready(function(){
if(jQuery('#checkoutbtn').is(':disabled')){
console.log('disabled');
jQuery("#voorwaarden").css("display", "inline-block");
}else{
console.log('enabled');
jQuery("#voorwaarden").css("display", "none");
}
})
片段
$(document).ready(function() {
if (jQuery('#checkoutbtn').is(':disabled')) {
console.log('disabled');
jQuery("#voorwaarden").css("display", "inline-block");
} else {
console.log('enabled');
jQuery("#voorwaarden").css("display", "none");
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkoutvoorwaarden" id="voorwaarden">Ga akkoord met onderstaande voorwaarden om door te gaan:</div>
<button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button>
<p><input type="checkbox" class="checkbox chk" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em style="color:#ff2727;">*</em></b></p>
<p><input type="checkbox" class="checkbox chk" id="geboorte" style="display:inline;" /><b> Ik ben ouder dan 18 jaar <em style="color:#ff2727;">*</em></b></p>
答
您需要检查你的按钮元素是否存在o r不喜欢以下：
这将检查第一个按钮是否加载，如果它被加载，那么只有你的功能将工作。
if ($("#checkoutbtn").length) {
if(jQuery('#checkoutbtn').prop(':disabled')){
console.log('disabled');
jQuery("#voorwaarden").css("display", "inline-block");
}else{
console.log('enabled');
jQuery("#voorwaarden").css("display", "none");
}
}
JQUERY官方参考：https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/
答
如果你想一个元素进行交互，需要一旦元素被添加到运行代码。
如果它来自Ajax请求，则可以使用成功处理程序。
如果它是添加元素的函数，请在完成该工作后调用您的方法。
您可以用您的代码创建一个事件处理程序，并在每次需要时触发该事件。
如果由于X或Y原因导致所有失败，您也可以使用间隔轮询文档，以便在添加元素后能够采取行动。
var interval = window.setInterval(function(){
if(jQuery('#checkoutbtn').length){
//Check if element exists.
window.clearInterval(interval);//Make sure we stop.
if(jQuery('#checkoutbtn').is(':disabled')){
console.log('disabled');
jQuery("#voorwaarden").css("display", "inline-block");
}else{
console.log('enabled');
jQuery("#voorwaarden").css("display", "none");
}
}
},1000);
请注意，这是最后的手段。使用前三个命题你应该有很多其他的可能性。
请向我们展示添加按钮的代码。 – UncleDave
加载页面后添加按钮的方式是什么？ $（document）.ready（）来得太早？ – iquellis
@UncleDave我使用的是Magento，所以我不确定技术细节，但我会在问题中添加我的html代码。 – twan