在页面加载后加载的元素上使用jquery

Question

I want to check if a button is enabled or disabled, but the button is added after pageload. How can I do this?

My code needs to show a message when the button is disabled and remove the message when the code is enabled.

My code:

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");
}
});

My html code:

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

Part of my jquery that only works when written like this (wrapped inside a document):

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);
  });

But I don't know how to use this .on('change') for the .is(:disabled) property.

Answer 1

If you want to interact on an element, you need to run the code once the element has been added.

If it is coming from an Ajax request, you could use the success handler.

If it's a function that adds the element, call your method after it has done the work.

You could create an event handler with your code and trigger that event every time it is needed.

If all that fails for X or Y reason, you could also poll the document using an interval to be able to act once the element has been added.

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);

Note that this is a last resort. You should have plenty other possibilities using the first 3 propositions.

Answer 2

You could wrap your code in document.ready .It will perform after the button created that means full document loaded

$(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");
}
})

Snippet

 $(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> 

Answer 3

You need to check whether your button element is exists or not like below:

This will check first button is loaded or not if it is loaded then only your functionality will work.

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 Official Reference: https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/