I have added jquery on other click events they are working fine but when i am trying load jQuery after the Shipping page load. I want to hide my custom added fields in shipping page but they are not working this is my custom field.


i have tried many methods like:

        $("#checkoutSteps").load(function(){     $("[name='customCheckoutForm.checkout_purchase_order_no']").css('display','none');


$(document).ajaxComplete(function() {

            alert("ajaxCompleted ;)")

and much more but did not worked for me. Please help me to get out of it.

1 Answer 1


This is because you're trying to use jQuery to interact with elements created with KO (Knockout), at the point your jQuery runs those elements likely haven't been created.

The better solution here would be to use KO to edit elements created with KO as trying to mix jQuery and KO will always give you a hard time as they will constantly be out of sync.

Within KO you can use the visible binding to achieve this:

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
  • I dont have much knowledge in this i just want my 2-3 functions should run after Shipping form load.Please suggest me a simple way to do this Feb 27, 2020 at 9:11
  • This may sound harsh, but if you're not comfortable with Javascript you should avoid making changes to the checkout. There is no simple way to work with the M2 checkout, you need to understand UI Components, Javascript and Knockout JS at the very least.
    – Ben Crook
    Feb 27, 2020 at 11:58
  • I have knowldge in Js and also Jquery but data binding and other stuff is new for me i have created a Mixin js and file but i just want my function or query work after all the ajax finishes Feb 27, 2020 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.