jquery onclick関数が定義されていません

Question

私はajaxスクリプトを持っており、関数から投稿しようとしています。私はonlick hrefを使用していますが、定義されていません。これは、ワードプレスを使用しています。スコープの内側と外側でコードを移動しようとしましたが、まだ動作しません。

<div id="live"> 
    <div class="container"> 
     <?php the_content(); ?> 
     <div id="comment-display"> 
      <form method="post" action="index.php" id="comments_submit"> 
       <input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name"/> 
       <input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>"/> 
       <textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea> 
       <a href="javascript:submitComment();" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a> 
      </form> 
      <br /> 
      <div id="displayComments"></div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    jQuery(function($) { 
     setInterval(function(){ 
      $.ajax({ 
       method: "GET", 
       url: "<?php echo get_template_directory_uri()?>/get_chat.php" 
      }).done(function(html){ 
       $('#displayComments').html(html); 
      }); 
     }, 2000); 

     function submitComment(){ 
      $.ajax({ 
       method: "POST", 
       url: "template-live.php", 
       data: {submitComment:$('#chatBox').val(),submitName:$('#nameBox').val(),submitEmail:$('#emailBox').val()} 
      }).done(function(html){ 
       alert('Your comment has been submitted, and will be displayed after approval.'); 
       $('#chatBox').val(''); 
      }); 
     } 
    }); 
</script> 

ありがとうございました:)

Answer 1

を使用すると、グローバル関数submitCommentを呼んだjavascript:submitComment()を行うと。 submitCommentはjQuery(function($) { ... })関数で定義されているため、グローバルではありません。したがって、window.submitCommentはundefined（したがってundefined is not a function）です。

グローバルはwindowオブジェクトに格納されます。あなたはできるだけグローバルの使用を避けるべきであると

window.submitComment = function() {...} 

注：

したがって、あなたは、グローバルとしてsubmitCommentことを公開することができます。

$("#submit").click(submitComment); 
// In this case, you shouldn't declare submitComment as a global anymore 

をそして、あなたがフォームにあるので、あなたは、関数の最後にreturn falseを使用することにより、a要素をクリックすると、デフォルトのブラウザの動作を停止する：この場合、あなたは追加することによってそれを行うことができます。

Answer 2

@Ionică Bizăuの溶液の代わりに。

hrefの代わりにonclick="submitComment()"を使用できます。あなたは、イベントハンドラの代わりに、インラインJSを使用していないのはなぜ

<a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="live"> 
 
    <div class="container"> 
 
    <?php the_content(); ?> 
 
    <div id="comment-display"> 
 
     <form method="post" action="index.php" id="comments_submit"> 
 
     <input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name" /> 
 
     <input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>" /> 
 
     <textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea> 
 
     <a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a> 
 
     </form> 
 
     <br /> 
 
     <div id="displayComments"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script type="text/javascript"> 
 
    jQuery(function($) { 
 
    setInterval(function() { 
 
     $.ajax({ 
 
     method: "GET", 
 
     url: "<?php echo get_template_directory_uri()?>/get_chat.php" 
 
     }).done(function(html) { 
 
     $('#displayComments').html(html); 
 
     }); 
 
    }, 2000); 
 

 
    window.submitComment = function(){ 
 
     console.log('submitComment called!'); 
 
     $.ajax({ 
 
     method: "POST", 
 
     url: "template-live.php", 
 
     data: { 
 
      submitComment: $('#chatBox').val(), 
 
      submitName: $('#nameBox').val(), 
 
      submitEmail: $('#emailBox').val() 
 
     } 
 
     }).done(function(html) { 
 
     alert('Your comment has been submitted, and will be displayed after approval.'); 
 
     $('#chatBox').val(''); 
 
     }); 
 
    } 
 
    }); 
 
</script>