Magento 2 - Using jQuery on HTML page

Question

I have a custom offline payment module and I am trying to use jQuery to hide a div in frontend/web/template/payment.html:

<script>
require([ 'jquery' ],
 function($){
 if ( $('#payroll-form').attr('id') ) {
 $('#payroll-message').hide();
 }
});
</script>
<div id="payroll-message">
<h1>Payment.html KO</h1>
</div>

I want to check if the payment method has loaded and if not then show a message. I can't get jQuery to work at all. How do I do this?

UPDATE I added the onepage.phtml template to my checkout_index_index.xml file - action method="setTemplate":

<referenceBlock name="checkout.root">
 <action method="setTemplate">
 <argument name="template" xsi:type="string">Vendor_Module::onepage.phtml</argument>
 </action>
 <arguments>
 <argument name="jsLayout" xsi:type="array">
 <item name="components" xsi:type="array">
 <item name="checkout" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="steps" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="billing-step" xsi:type="array">
 <item name="component" xsi:type="string">uiComponent</item>
 <item name="children" xsi:type="array">
 <item name="payment" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="renders" xsi:type="array">
 <!-- merge payment method renders here -->
 <item name="children" xsi:type="array">
 <item name="payroll-split" xsi:type="array">
 <item name="component" xsi:type="string">Vendor_Module/js/view/payment/offline-payments</item>
 <item name="methods" xsi:type="array">
 <item name="payroll" xsi:type="array">
 <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>

And in frontend/templates/onepage.phtml I copied all the code from the vendor file and added this at the top:

<script>
require(['jquery'],
 function($){
 $('document').ready(function(){
 if ( $('#payroll-form').attr('id') ) {
 // $('#payroll-message').hide();
 alert("form loaded");
 }
 });
});
</script>

In frontend/web/template/payment.html:

<form id="payroll-form" class="form form-payroll" data-role="payroll-form">
 <fieldset class="fieldset payment method" data-bind='attr: {id: "payment_form_" + getCode()}'>
 <div class="field field-number required">
 <label for="payroll_split" class="label">
 <span><!-- ko i18n: 'payroll-form Number of Payroll Payments:'--><!-- /ko --></span>
 </label>
 <div class="control">
 <select id="payroll_split"
 name="payment[payroll_split]"
 data-validate="{required:true}"
 data-bind='
 attr: {title: $t("Number of Payroll Payments:")},
 value: payrollSplit'>
 <option value="Select Payment Split">Select Payment Split</option>
 <option value="1 Pay Period">1 Pay Period</option>
 <option value="2 Pay Periods">2 Pay Periods</option>
 <option value="3 Pay Periods">3 Pay Periods</option>
 <option value="4 Pay Periods">4 Pay Periods</option>
 </select>
 </div>
 </div>
 </fieldset>
 </form>

The jQuery in my onepage.phtml page won't target the #payroll-form in my payment.html page or in my payment/payroll-form.html page or in payment-methods/list.html page. As a test, the alert also will not work. The alert will work if I target the #checkout in the onepage.phtml (the page the script is on) but not when I target the id in the payment.html or the list.html page. What could be going wrong?

UPDATE 2 Besides the update above also tried this in web/js/model/payroll.js

define([
 'jquery'
], function ($) {
 'use strict';
 /** Override default place order action and add agreement_ids to request */
 return function (paymentData) {
 var payrollSplitForm,
 payrollSplitData;
 payrollSplitForm = $('form[data-role=payroll-form] #payroll_split');
 payrollSplitData = payrollSplitForm.val();
 if (paymentData['extension_attributes'] === undefined) {
 paymentData['extension_attributes'] = {};
 }
 paymentData['extension_attributes']['payroll_split'] = payrollSplitData;
 };
 $('document').ready(function(){
 if ( $('#payroll-form').attr('id') ) {
 alert("form loaded");
 }
 });
});

How can I target this div so I can load my message?

Answer 1

Supposing that your div in payment.html is : <div class="my-payment">...</div>

We bind our js to the UI via data-bind="afterRender" so the result will be something like this :

<div class="my-payment"
 data-bind="afterRender: function(){
 alert('Yeah, it works');
 }">
 ...
</div>

Note: don't forget to :

clean the cache
clean var/view_preprocessed content
clean pub/static content
deploy the static content = php bin/magento setup:static-content:deploy -f

• stanhook: @Prince I don't think this will work for what I want. If my payment method doesn't load, I want to show a message. In my payment.html page, if the div doesn't load I want the message to show. I can't get the jQuery to work at all. This won't even work: <script type="text/javascript"> require(['jquery', 'jquery/ui'], function($){ $('document').ready(function(){ alert("page loaded"); }); }); </script>
• stanhook: Please see the update above. I added new code.