some basic jquery wont work

I have some simple jquery calculations on form fields that i can’t get to work.

I can see the JS asset is loaded when i view page source, i have the AppAsset::register in the main layout file, yet something simple as

$('#sale-price').on('change', function() {

	if ($('#percentage').val() != ""){

 	   console.log('calculate something');


	else {

           console.log('Enter percentage first');



does not seem to work.

Now, the page im trying to use it on is being loaded as a modal - it is the standard _form.php but i’m loading it using


            'header' => '<h4>New Sale</h4>',

            'id' => 'modalCreateSale',

            'size' => 'modal-lg',


        echo "<div id='modalContent'></div>";


Does that change things ?

I’m using the #sale-price, based on what i can see when i inspect the element in chrome.

What is bizarre is that as a test, i added simple page load alert to the top of the file:

$(document).ready( function () {


  alert("Hello, world")



and it only works AFTER i reload the page.

Any ideas ?

any idea how to troubleshoot this ? Does being modal affect the JS ?

very odd

where should i be registering the appAsset ?

i just pulled up the modal by itself directly and when i view source, i dont see my JS files in the included ?

I’ve currently got it in /views/layouts/main.php

when i added the AppAsset register to the create.php (where the form im trying to jquery is) , it works !

So clearly as a modal from the main layout its not loading my JS ?

ok found it - to do with bootstrap modal, have to bind it differently:

$('body').on('change', '#sale-price', function() {