Use jquery on element that is loaded after pageload

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.

Which way is the button added after the page has been loaded? $(document).ready() comes too early? — iquellis
– iquellis, Commented Sep 4, 2017 at 12:40
@UncleDave I am using Magento so I am not sure about the technical details, but I'll add my html code in the question. — twan
– twan, Commented Sep 4, 2017 at 12:42
@twan what the problem with last code snippet onchange event?.Why include the is(':disabled').It only focuses the single element, not multiple — prasanth
– prasanth, Commented Sep 4, 2017 at 12:59
@prasad That part works perfectly, it checks if 1 or both checkboxes are unchecked and disables the button if that's true. I added it to show that this code works, so I think I need to do something similar but I'm not sure how to do that with checking if a button is disabled. — twan
– twan, Commented Sep 4, 2017 at 13:08

Salketer · Accepted Answer · 2017-09-04 12:48:38Z

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.

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

Rohan Fating · Accepted Answer · 2017-09-04 12:45:45Z

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/

prasanth · Accepted Answer · 2017-09-04 12:47:03Z

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>

It already is, I should have added that to my question, I edited it
you document ready function not closing properly check this )} is an invalid closing change to })
It is closed correctly, I added it quickly myself, it's a default magento file.

Collectives™ on Stack Overflow

Use jquery on element that is loaded after pageload

3 Answers 3

1 Comment

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Related