Question

我在加载表单时遇到问题。它不会触发任何事件。这是表格：

<form id ="form1" method="post" action="newjsp.jsp">
<h2>Form1</h2>
<p>
<span style="margin-left: 4px">Number:</span>
<input type="hidden" name="form_number" value="1"/>
<input class="textBox" type="text" name="number" value=""/>
</p>
<p>
<input id="the_button" type="submit" name="submit_button" value="Set"/>
</p>
</form>

我已经尝试过使用.on（）,. live（）和.delegate（）的基本示例，但这些似乎都不起作用。我想验证数字是否长11位。如果没有，请停止提交。这是jQuery：

$("#form1").submit(function e(){
if($(".textbox").length != 11)
    {
        e.preventDefault();
        $("#output").append("<p style='color:red;'>Please enter a valid number!</p>");
    }
});

谢谢！

Answer 1

将事件委派与.on()一起使用，因为表单是动态创建的。此外，您的e参数位置错误，因此preventDefault()调用将失败。

$(document).on('submit', '#form1', function(e){
    if($(".textBox").val().length != 11)
    {
        e.preventDefault();
        $("#output").append("<p style='color:red;'>Please enter a valid number!</p>");
    }
});

您的textBox班级名称也存在问题，您使用的格式textBox但是在您使用的Javascript textbox中。最后，使用$('.textBox').val().length获取的长度不是$('.textBox').length。后者只会给出所选元素的数量，而不是输入值中的字符数。

Answer 2

在括号内移动“e”并运行：

$("#form1").submit(function(e){
if($(".textbox").length != 11)
    {
        e.preventDefault();
        $("#output").append("<p style='color:red;'>Please enter a valid number!</p>");
    }
});

动态加载表单上的事件

2 个答案: