$ is not defined

时间:2020-08-10 作者:user9437856

我正在学习WordPress,正在制作联系我们表单。我正在使用jQuery验证。我正在使用以下代码。

function contact($atts){ 
$html=\'<form name="invite" id="contactform" class="contactform" method="post" action="">
  <div class="row">

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="form-group pb-3">
        <label>Your email address</label>
        <input name="email" placeholder="[email protected]" type="email" class="form-control customInput" />
      </div>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="form-group mt-3">
        <label>Your Message</label>
        <textarea name="message" placeholder="Your Message..." rows="6" class="form-control customInput"></textarea>
      </div>
    </div>

  </div>
  <div class="formbtn mt-5"><input type="submit" class="" name="Send Mail"></div>
</form>\'; 
$html.=\'<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<script>
  $(function() { // ready handler
    var isReqInprogress = false;
    $.validator.addMethod("emailExt", function(value, element, param) {
      return value.match(/^[a-zA-Z0-9_\\.%\\+\\-]+@[a-zA-Z0-9\\.\\-]+\\.[a-zA-Z]{2,}$/);
    }, "Your email id is not correct format");
    $("#contactform").validate({
      rules: {
        email: {
          required: true,
          email: true,
          emailExt: true

        },

        message: {
          required: true,
          minlength: 10
        }
      },
      submitHandler: function(form) {
        if (isReqInprogress) {
          return;
        }
        $.ajax({
          url: process.php ",
          type: "post",
          data: $("#contactform").serialize(),
          dataType: "JSON",
          success: function(response) {

            alert("Your message has been received.");
            location.reload();
            isReqInprogress = false;
          }
        });
      }
    });

  });
</script>\'; 
return $html; 
} add_shortcode( \'contact-form\', \'contact\');
我的问题是,我得到了错误

未捕获引用错误:$未定义

我已经在</body>. 我知道jquery验证在jquery之上,但如果我再次添加jquery,那么页面上将有两个jquery。

如果我从底部删除jQuery,那么我的其他脚本将无法工作。

你能帮助我处理这个问题的最好方法是什么吗?

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

WP以无冲突模式加载jQuery,因此您可以$() 对于jQuery(), 或者将其包装在函数中,例如。

(function($) {

  // Code using `$` ...

})(jQuery);