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