0

Used this question here for reference: Using an HTML button to call a JavaScript function

jQuery ( document ).ready( function ( $ ) {

    function demoBanner () { 

        // set click handler
        $( '#demo' ).click( function ( ) {

        alert('click registered...');
        });      
    }
    // called functions
    $ ( function () {

        demoBanner();

    });
});
<input id="demo" type="button" class="btn btn-warning" value="Demo Banner">

<!--jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- local JS -->
<script src="http://localhost:8888/js/test.js"> </script>

Why isnt the function being called?

stefanowiczp
  • 475
  • 5
  • 13
Jim
  • 1,988
  • 6
  • 34
  • 68
  • 1
    https://jsbin.com/xiyihososa/1/edit?html,js,output — I can't reproduce the problem. Either the code in the question doesn't accurately reflect the code you are testing or you got the URL to your script wrong. – Quentin Jan 06 '19 at 20:45
  • There's no point in nesting a call to `$(func)` inside a call to `jQuery(document).ready(func)`. One is an alias for the other. – Quentin Jan 06 '19 at 20:45
  • Here a test without problem: https://codepen.io/aureliendebord/pen/oJdYNQ Is there message in the console? – Aurélien Jan 06 '19 at 20:45
  • It works for me if you delete the $(function() {...} braces and call demoBanner() – Lloyd Nicholson Jan 06 '19 at 20:48
  • It was previously working without having to remove anything. code has been copy and pasted – Jim Jan 06 '19 at 21:02
  • 1
    *it was previously working* - so what *else* changed? Something has changed and it may not be *this* code. – freedomn-m Jan 06 '19 at 21:26
  • Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. – freedomn-m Jan 06 '19 at 21:26
  • 1
    Also, "*it was previously working*" *"nothing changed"* - then it will still be working here (as shown by numerous comments/jsbins/codepens etc). You need to find why it's not working and copying working code here is pointless. – freedomn-m Jan 06 '19 at 21:28
  • Regarding comments and answers mentioning `jQuery(document).ready(` vs `$(function() { ` - these are equivalent/aliases - if you call doc ready after doc ready has been fired it, the anonymous/callback function will be run immediately, so while there's no point nesting it, it has zero impact so removing it won't *magically* make this work as it works *with* the double doc ready anyway. – freedomn-m Jan 06 '19 at 21:30
  • @Jim if one of the posted answers is the solution you have used, it is best to mark it as the answer. – Twisty Jan 07 '19 at 02:44
  • none of the posted answers helped. the solution is that i was using multiple ID's of 'demo'...unofrtunately i didnt post the surround div that had the duplicate demo. – Jim Jan 07 '19 at 03:09
  • @Jim — I'm sure there are plenty of duplicates for your real problem, you should probably just delete this question. – Quentin Jan 07 '19 at 12:02

1 Answers1

-1

Try this

$(document).ready(function() {
  // called functions
  demoBanner();
});
function demoBanner() {
  // set click handler
  $('#demo').click(function() {
    alert('click registered...');
  });
}
Vrrayz
  • 65
  • 2
  • 2
  • 8