Question

我写了一个简单的页面，检查是否有人输入了正确的电子邮件两次。我想在页面上显示另一个元素天气与否，第二个表单块中的电子邮件与第一个相同。我正在使用jquery id选择器。

<head>
<script type="text/javascript" src="jquery1.8.3-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">


    function emailCheck(){
        if($("#email").val() != $("#email2").val())
        {
            $("#err").innerText = "emails don't match, sucka";
            $("#test").textContent = "emails don't match, sucka";
            $("#test2").innerHtml = "emails don't match, sucka";
            document.getElementById("getEleTest").innerText = "emails don't match, sucka";
            alert("dont match");
        }
    }
</script>
</head>

<body>
<form action="SignUp" method="POST">
    <table>
        <label for="email">Email</label></br>   
        <input id="email" type ="email" name="email1111"/> </br>
        <label for="email2" > Enter Email Again </label></br> 
        <input id="email2" type="email" name="email21111" onkeyup="emailCheck();"></br>
        <input type="submit" value="Sign Up">
    </table>
</form>

<div id="err"></div>
<div id="test"></div>
<div id="test2"></div>
<div id="getEleTest"></div>
</body>

在所有情况下，我都没有在元素中收到任何文本我错误，测试和test2元素，但我确实得到了一个警告窗口，并且getEleTest元素中有文本。这可能会发生什么。我在firebug控制台中没有出现任何错误，jquery正在获取'email'和'email2'元素。我已经检查过我正在正确链接jquery脚本，以防我没有添加google jquery源代码。感谢

Answer 1

将所有jQuery内容放在$(document).ready(function(){ //your code here });

中编辑2：我的JS代码中有一个拼写错误。你正在将常规JS与jQuery混合。

为什么不写这样的东西？

$(document).ready(function(){
    $("#signUpForm").submit(function(evt){
        if($("#email").val() != $("#email2").val()){
            $("#err").html("emails don't match, sucka");
            $("#test").html("emails don't match, sucka");
            $("#test2").html("emails don't match, sucka");
            $("#getEleTest").html("emails don't match, sucka");
            alert("dont match");
            evt.preventDefault();
        };
    });
});

并添加id =“signUpForm”属性来形成？此外，您需要从HTML中删除内联JS，以便您的输入没有onKeyUp事件您可以看到我的示例here。

Answer 2

应该是：

document.getElementById("id").textContent = "string";

或

$("#id").text("string");

确保你没有将两者合并，否则你将无法获得预期的结果。

Answer 3

编写代码，我在我的机器上测试

<script type="text/javascript">
    function emailCheck(){
        if($("#email").val() != $("#email2").val())
        {
            $("#err").html("emails don't match, sucka");
            $("#test").html("emails don't match, sucka");
            $("#test2").html("emails don't match, sucka");

            document.getElementById("getEleTest").innerText = "emails don't match, sucka";
            //alert("dont match");
        }
    }
</script>

Answer 4

所有答案都是正确的。您必须将代码包装在$（document）.ready函数中，然后使用jQuery事件，而不是内联事件。问题是onkeyup在jQuery调用中不能正常工作，因为它们在函数范围内调用。我认为还没有调用emailCheck函数。删除 onkeyup 并尝试此操作，然后从那里开始工作：

$(document).ready(function(){
  $('#email2').keyup( function() {
    alert("test");   
  });
});

带有innerHtml或innerText或textContent的jquery id选择器

4 个答案: