javascript - 将 PHP 添加到 HTML 文件后 JQuery 不工作

Question

我正在构建一个具有功能齐全的 jquery 的网页(用于表单提交)。自从在文件中添加 php 以将用户数据拉入表单后，jQuery 已停止工作，并且不再调用按钮单击时触发的函数。

控制台现在在调用函数时返回 this。

Uncaught TypeError: Cannot read property 'length' of undefined
at HTMLButtonElement.<anonymous> ((index):255)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.q.handle (jquery.min.js:3)

这是文件顶部包含的 php:

<?php
 if(isset($_GET['p'])){
  $product_code = $_GET['p'];
 }
 else{
  $product_code = "beans";
 }

 if(isset($_GET['name'])){
  $name = $_GET['name'];
 }
 else{
  $name = "";
 }

if(isset($_GET['email'])){
 $email = $_GET['email'];
}
else{
 $email = "";
 }

 switch ($product_code) {
   case "beans":
    $product = "Baked Beans";
    break;
  case "peas":
    $product = "Green Peas";
    break;
 ?>

整个body , <?php echo $product; ?>被插入到几个地方。

这是 jQuery，放在 </head> 之前标签(现在不起作用):

$(document).ready(function() {
  $("#form-cont-btn").click(function(e) {
    e.preventDefault();
    var review = $('textarea#review').val();
// ***line 255 below***
    if (review.length < 1) {
      $("textarea").addClass("error");
      alert("Oops! Looks like your review is empty..\n\nPlease write review before pressing 'Continue'.");
      return false;
    } else if (review.length < 50) {
      $("textarea").addClass("error");
      alert("Oops! Your review should contain at least 50 characters");
      return false;
    }
    $(".act-1,.act-1-btn").fadeOut('slow', function() {
      $(".act-2,.act-2-btn").fadeIn();
    });
    return false;
  });
  $("textarea").click(function(e) {
    $("textarea").removeClass("error");
  });
  var form = document.getElementById('form-id');
  $("#form-btn").click(function() {
    var name = $('#name').val();
    if (name.length < 1) {
      $("#name").addClass("error");
      alert("Oops! Looks like your name is empty..\n\nPlease enter your name before pressing 'Enter Now'.");
      return false;
    } else if (name.length < 2) {
      $("#name").addClass("error");
      alert("Oops! Please enter a valid name, an alias is fine");
      return false;
    }
    var email = $('#email').val();
    if (email.length < 1) {
      $("#email").addClass("error");
      alert("Oops! Looks like your email is empty..\n\nPlease enter your email before pressing 'Enter Now'.");
      return false;
    } else if ((email.indexOf('@') == -1) || (email.indexOf('.') == -1) || (email.length < 7)) {
      alert(email.indexOf('@'));
      alert(email.indexOf('.'));
      alert(email.length);
      $("#email").addClass("error");
      alert("Oops! Looks like your email is invalid..\n\nPlease enter a valid email before pressing 'Enter Now'.");
      return false;
    }
    alert('submitting');
    $('this').submit();
  });

  $("#name").click(function(e) {
    $("#name").removeClass("error");
  });
  $("#email").click(function(e) {
    $("#email").removeClass("error");
  });
  $('#entry-focus').change(function() {
    var selected_product = $('#entry-focus').find(":selected").text();
    $('form').find("textarea").each(function() {
      if (!$(this).val()) {
        $(this).attr("placeholder", "Comment on your experience with " + selected_product);
      }
    });
  });
});

这是表单的 html:

<div class="row form-holder">
                <h2 class="upper spaced">Enter your review for a chance to Win</h2>
                <form id="form-id" action="connect/csv.php" method="POST">

                        <!--ACT 1-->
                        <div class="row act-1 grid">
                            <div class="row">

                                <span class="form-label">Product:</span>

                                <h2 class="upper heavy spaced bigger text-left" align="left"><? echo $product; ?></h2>
                            <input type="hidden" value="<?php echo $product_code; ?>" id="product" name="product">

                        </div>
                        <div class="row"><span class="form-label">Review:</span><textarea type="textarea" value="" id="entry-focus" name="review" form="form-id" placeholder="Comment on your experience with <? echo $product; ?>"></textarea></div>
                        </div>

                        <button id="form-cont-btn" class="btn-action widest act-1-btn">Continue</button>

                        <!--END ACT 1-->
                        <!--ACT 2-->
                        <div class="row act-2">
                        <div class="row"><span class="form-label">Name:</span><input type="text" value="<? echo $name; ?>" id="name" name="name" placeholder="Enter Your Name"></div>
                        <div class="row"><span class="form-label">Email:</span><input type="text" value="<? echo $email; ?>" id="email" name="email" placeholder="Enter Valid Email"></div>
                        </div>

                        <button id="form-btn" class="btn-action widest act-2-btn">Enter Now</button>
                        <input type="hidden" value="set" name="submit">

                        <!--END ACT 2-->
                </form>
            </div>

经过多次尝试使用 $.noConflict(); 解决此问题和改变$至jQuery ，控制台仍然抛出相同的错误。

关于什么可能导致 jQuery 停止工作有什么想法吗？

Answer 1

线路254是 var review = $('textarea#review').val(); ，这意味着您想要获取 textarea 的值与 id设置为review .

在生成的 HTML 中，文本区域有 id设置为entry-focus 。所以，你的代码在线 254除了 undefined 之外什么也没得到。这就是为什么您在 255 行出现错误消息的原因.

要获得正确的内容，您必须替换行 254使用此代码:

var review = $('textarea#entry-focus').val();

或者设置id将您的文本区域设置为 review .