jQuery的onclick函數沒有定義

Question

我有一個ajax腳本，我想從一個函數發佈。我使用的是一個onlick href，但它沒有被定義爲undefined。這是使用wordpress。我試圖在代碼範圍內部和外部移動代碼，但我仍然無法使其工作。

<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

當你做javascript:submitComment()說的呼喚一個全局函數submitComment。由於submitComment是在jQuery(function($) { ... })函數中定義的，因此它不是全局的。因此，window.submitComment是undefined（因此undefined is not a function）。

全局變量存儲在window對象中。

因此，您可以公開submitComment作爲一個全球性的：

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

請注意，您應該避免使用全局變量儘可能。在這種情況下，你可以做到這一點通過添加：

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

而且因爲你是一個形式，你想一下a元素時，通過在函數的末尾使用return false停止默認瀏覽器的行爲。

Answer 2

替代@Ionică Bizău的解決方案。

您可以使用onclick="submitComment()"而不是href。

<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>