jQuery not picking up .on('submit', function(e) or e.preventDefault();

Question

For some reason my jQuery isnt picking up on the #betButton click/submit, anyone have any idea as to why? Been trying to fix it for the past hour or two and no luck what so ever. Any help would be greatly appreciated. :)

$(function() {    
$("#betButton").on('submit', function(e) {
       e.preventDefault();

   var $form = $(this),
   data = "betAmount=" + $form.find("#betAmount").val() + "choice=" + $('input[name=choice]:checked').val(),
   url = $form.attr("action");
   if($.trim($form.find("#betAmount").val()) === ''){
   }else{
     $.ajax({
       type: "POST",
       url: url,
       data: data,
       success: function(response){
         //$form.find("#betAmount").attr("disabled", true);
         //$form.find('#betButton').attr("disabled", true);
         //$("input[type=radio]").attr('disabled', true);
         if(repsonse.indexOf("Bet already made") >= 0){
           $('#mMessage').find('.modal-content').val("You've already placed your bet.");
           $('#mMessage').modal('show');
         }else{
           $('#mMessage').find('.modal-content').val("Your bet has been placed successfully.");
           $('#mMessage').modal('show');
         }
       }
     })
   }
 });
});

<form action="/models/coinroulette.php" method="POST">
            <div class="panel panel-default">
               <div class="panel-heading panelHNew">Make a Bet</div>
               <div class="panel-body">
                  <div class="form-group padding-top">
                     <p class="padding-left">Enter in a bet amount and select a coin (heads or tails).</p>
                     <div class="col-lg-8">
                        <div class="input-group">
                           <span class="input-group-addon">
                           <i class="glyphicon glyphicon-gift"></i>
                           </span>
                           <input class="form-control" placeholder="Bet Amount" id="betAmount" name="betAmount" type="number" autofocus>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <label style="margin-left: -10px;">
                        <input type="radio" name="choice" value="heads" class="noRButton"/>
                        <img class="profile-img" src="../resources/img/coinroulette/heads.png" alt=""/>
                        </label>
                        <label>
                        <input type="radio" name="choice" value="tails" class="noRButton"/>
                        <img class="profile-img" src="../resources/img/coinroulette/tails.png" alt=""/>
                        </label>
                     </div>
                     <div class="col-lg-12">
                        <div class="form-group padding-top">
                           <button type="submit" id="betButton" class="btn btn-lg btn-primary btn-block">Place Bet</button>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </form>

Answer 1

Buttons don't have a submit event.

Move the event to the form instead:

$("form").on('submit', function(e) {
  ...
});

You'll also need to make a spelling correction (repsonse instead of response):

if(repsonse.indexOf("Bet already made") >= 0){

And there's no need to use find() to get to an element that has an ID. Change:

$form.find("#betAmount").val()

… to:

$("#betAmount").val()