Jquery没有被调用

Question

首先，这是我的代码

好的我的问题是，在尝试使用注册表单时，它不会调用代码。

我已经多次检查了这一点，似乎无法找到问题我在同一页面上使用登录脚本，这看起来很好。

login.js

$(function() {

    // Expand
    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    // Collapse
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     

    // Change Text
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     

// Login proccess Start
  $('.error').hide();
   $(".bt_login").click(function() {
      // validate input
      $('.error').hide();
      var username = $("input#username").val();
        if (username == "") {
        $("label#username_error").show();
        $("input#username").focus();
        return false;
      }

        var password = $("input#password").val();
        if (password == "") {
        $("label#password_error").show();
        $("input#password").focus();
        return false;
      }
      var rememberMe = $("input#rememberMe").val();

// correct data sent
  var dataString = 'username='+ username + '&password=' + password + '&submit=Login' + '&rememberMe=' + rememberMe;
  alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "../../inc/files/login.php",
    data: dataString,
    success: function() {

  return false;
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      $('#login_form').html("<div id='message'></div>");
      $('#message').html("<h2>!</h2>")
      .append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>")
      .hide()
      .fadeIn(1500, function() { 
      $('#message').append("<img id='cross' src='images/cross.png' />"); 
      }); 
  return false;;
}
  });
    });

// End login proccess

//Registration Process start

  $("bt_register").click(function() {
      // validate inpu
      $('.error').hide();
      var username2 = $("input#username2").val();
        if (username2 == "") {
        $("label#username2_error").show();
        $("input#username2").focus();
        return false;
      }
//      var re = new RegExp("/[^a-z0-9\-\_\.]+/i");
//      if(re.test(username2) = true) {
//      $("label#username2_error2").show();
//        $("input#username2").focus();
//        return false;
//    }
        var password2 = $("input#password2").val();
        if (password2 == "") {
        $("label#password2_error").show();
        $("input#password2").focus();
        return false;
      }
      var email = $("input#email").val();
        if (password == "") {
        $("label#email_error").show();
        $("input#email").focus();
        return false;
      }

// correct data sent
  var dataString = 'username='+ username2 + '&password=' + password2 + '&submit=Register' + '&email=' + email;
  alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "../../inc/files/login.php",
    data: dataString,
    success: function() {

  return false;
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      $('#reg_form').html("<div id='message'></div>");
      $('#message').html("<h2>!</h2>")
      .append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>")
      .hide()
      .fadeIn(1500, function() { 
      $('#message').append("<img id='cross' src='images/cross.png' />"); 
      }); 
return false;
   }

});


  });
});

html表单调用Jquery

<div id="reg_form">
    <form class="clearfix" action="" >
        <h1>Register Here!</h1>             
        <label class="grey" for="username">Username:</label>
        <input class="text-input" type="text" name="username2" id="username2" value="" size="23" />
        <label class="error" for="username2" id="usernamename2_error">This field is required.</label> 
        <label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!</label>
        <label class="grey" for="email">Email:</label>
        <input class="text-input" type="text" name="email" id="email" size="23" />
        <label class="error" for="email" id="email_error">This field is required.</label> 
        <label class="grey" for="password2">Password:</label>
        <input class="text-input" type="password" name="password2" id="password2" size="23" />
        <label class="error" for="password2" id="password2_error">This field is required.</label> 
        <input type="submit" name="submit" value="Register" class="bt_register" />
    </form>
</div>

Answer 1

更改

$("bt_register").click(function() {

以

$(".bt_register").click(function(event) {
    event.preventDefault();

第二个错误是if (password == "") {，因为对于.bt_register点击事件，您没有定义password变量。

您可以将var password;定义为global，因此每个点击事件功能都可以使用它。

我在这里修改了你的代码就是我所做的，并且提醒传递的字符串。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(function()
{
    var password;
    $("#open").click(function()
    {
        $("div#panel").slideDown("slow");
    }); 

    $("#close").click(function()
    {
        $("div#panel").slideUp("slow"); 
    });     

    $("#toggle a").click(function ()
    {
        $("#toggle a").toggle();
    });     

    $('.error').hide();

    // Start login proccess

    $(".bt_login").click(function(event)
    {
        event.preventDefault();
        $('.error').hide();

        var username = $("input#username").val();
        if (username == "")
        {
            $("label#username_error").show();
            $("input#username").focus();
            return false;
        }

        password = $("input#password").val();

        if (password == "")
        {
            $("label#password_error").show();
            $("input#password").focus();
            return false;
        }
        var rememberMe = $("input#rememberMe").val();

        var dataString = 'username='+ username + '&password=' + password + '&submit=Login' + '&rememberMe=' + rememberMe;
        alert (dataString);return false;

        $.ajax(
        {
            type: "POST",
            url: "../../inc/files/login.php",
            data: dataString,
            success: function()
            {
                return false;
            },
            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                $('#login_form').html("<div id='message'></div>");
                $('#message').html("<h2>!</h2>").append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>").hide().fadeIn(1500, function() { 
                    $('#message').append("<img id='cross' src='images/cross.png' />"); 
                }); 
                return false;;
            }
        });
    });

    // End login proccess

    //Registration Process start

    $(".bt_register").click(function(event)
    {
        event.preventDefault();
        // validate inpu
        $('.error').hide();
        var username2 = $("input#username2").val();

        if (username2 == "")
        {
            $("label#username2_error").show();
            $("input#username2").focus();
            return false;
        }

        var password2 = $("input#password2").val();
        if (password2 == "")
        {
            $("label#password2_error").show();
            $("input#password2").focus();
            return false;
        }

        var email = $("input#email").val();
        if (password == "")
        {
            $("label#email_error").show();
            $("input#email").focus();
            return false;
        }

        // correct data sent
        var dataString = 'username='+ username2 + '&password=' + password2 + '&submit=Register' + '&email=' + email;
        alert (dataString);return false;

        $.ajax(
        {
            type: "POST",
            url: "../../inc/files/login.php",
            data: dataString,
            success: function()
            {
                return false;
            },
            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                $('#reg_form').html("<div id='message'></div>");
                $('#message').html("<h2>!</h2>").append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>").hide().fadeIn(1500, function()
                {
                    $('#message').append("<img id='cross' src='images/cross.png' />"); 
                }); 
                return false;
            }
        });

    });
});

</script>
<div id="reg_form">
    <form class="clearfix" action="" >
        <h1>Register Here!</h1>             
        <label class="grey" for="username">Username:</label>
        <input class="text-input" type="text" name="username2" id="username2" value="" size="23" />
        <label class="error" for="username2" id="usernamename2_error">This field is required.</label> 
        <label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!</label>
        <label class="grey" for="email">Email:</label>
        <input class="text-input" type="text" name="email" id="email" size="23" />
        <label class="error" for="email" id="email_error">This field is required.</label> 
        <label class="grey" for="password2">Password:</label>
        <input class="text-input" type="password" name="password2" id="password2" size="23" />
        <label class="error" for="password2" id="password2_error">This field is required.</label> 
        <input type="submit" name="submit" value="Register" class="bt_register" />
    </form>
</div>

Answer 2

取而代之的是i suggest you to do this with submit form：

$("#reg_form").children('form').submit(function (e) {
    e.preventDefault(); //<------------stops the submission
    // validate inpu
    $('.error').hide();
    var username2 = $("input#username2").val();
    if (username2 == "") {
        $("label#username2_error").show();
        $("input#username2").focus();
        return false;
    }

    var password2 = $("input#password2").val();
    if (password2 == "") {
       $("label#password2_error").show();
       $("input#password2").focus();
       return false;
     }

     var email = $("input#email").val();
     if (password == "") {
       $("label#email_error").show();
       $("input#email").focus();
       return false;
     }

     // correct data sent
     var dataString = $(this).serialize();
     alert(dataString);

     $.ajax({
        type: "POST",
        url: "../../inc/files/login.php",
        data: dataString,
        success: function () {
           alert('success.');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          $('#reg_form').html("<div id='message'></div>");
          $('#message').html("<h2>!</h2>")
              .append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown, "</p>")
              .hide()
              .fadeIn(1500, function () {
                  $('#message').append("<img id='cross' src='images/cross.png' />");
              });
              return false;
        }

    });
 });

Answer 3

确定 我知道你的var dataString格式不正确

你可以尝试这种语法

data: '{LiveID: "' + Live_ID + '", CategoryID: "' + Category_ID + '"}',

Answer 4

这允许我创建一个标签并将其链接到预定义的功能。将函数包含在文档正文和标签之前。

<label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!

功能（开）