Magento 2.3.3 -Load Custom Jquery after the Shipping Form load

Question

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.

 $("[name='customCheckoutForm.checkout_purchase_order_no']").css('display','none');
 $("[name='customCheckoutForm.checkout_buyer_name']").css('display','none');

i have tried many methods like:

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

2.

$(document).ajaxComplete(function() {
 alert("ajaxCompleted ;)")
 }

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

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.
</div>

• Sayyed Hasan: 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
• Ben Crook: 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.
• Sayyed Hasan: 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