jQueryイベントはHTMLフォームに送信されません。

Question

この問題は既に解決されていますが、私が試したすべての解決策がうまくいかない場合は申し訳ありません。私がしたいことは、フォーム要素が送信されたときに、いくつかのjQueryコードをトリガーすることです。 ここに私のコードです。

JS：

$(document).ready(function() { 
    $('form').bind('submit', function() { 
     alert('hi'); 
      var word10 = <?php echo $word10; ?>; 
      var word20 = <?php echo $word20; ?>; 
      var word1Txt = <?php echo $word1Txt; ?>; 
      var word2Txt = <?php echo $word2Txt; ?>; 

      $('div.word1').prepend("<h3 class='header'>hi" + word1Txt + "</h3>"); 
      $('div.word2').prepend("<h3 class='header'>hi" + word2Txt + "</h3>"); 
    }); 
}); 

HTML：

<form class="form-inline" method="post"> 
    <input class="form-control" type="text" placeholder="First Word" name="word1" autofocus> 
    <input class="form-control" type="text" placeholder="Second Word" name="word2" autofocus> 
    <input class="btn btn-primary form-submit" type="submit" value="Compare"> 
</form> 

Answer 1

使用.on（）または.submit（）の代わりに、あなたVARSが文字列であることになっている場合は、それらを引用：

$(document).ready(function() { 
    $('form').on('submit', function() { 
     alert('hi'); 
      var word10 = '<?php echo $word10; ?>'; 
      var word20 = '<?php echo $word20; ?>'; 
      var word1Txt = '<?php echo $word1Txt; ?>'; 
      var word2Txt = '<?php echo $word2Txt; ?>'; 

      $('div.word1').prepend("<h3 class='header'>hi" + word1Txt + "</h3>"); 
      $('div.word2').prepend("<h3 class='header'>hi" + word2Txt + "</h3>"); 
    }); 
});