我在输入框中有规则，我用 jQuery 创建它们，我使用 XMLHttpRequest 调用输入框。当我使用 XMLHttpRequest 调用它后，我创建的所有规则都失败了。
但是我尝试过不使用 XMLHttpRequest，我制定的所有规则都运行得很好。这是为什么？
我希望输入框中的规则能够正常工作，即使我使用 XMLHttpRequest 调用它们。
这是我在第一个文件（z1.php）中的简单代码：
<?php
include('z1ajax.php');
?>
<html lang="en">
<head>
<title>SIGN UP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/x-icon" href="/to/img/bqicon.png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
background-color:black;
}
</style>
<script>
window.onload=function(){
var signup = document.getElementById("signup");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/to/z1ajax.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
signup.innerHTML = xhr.responseText;
}
}
var v="onload=yes";
xhr.send(v);
}
$(document).ready(function(){
$('#email').on('keyup',function(){
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g,'')); //NO SPACE
$(this).val($(this).val().toLowerCase()); //LOWERCASE
});
$('#username').bind('keyup keypress blur', function(){
$(this).val(function(i, val) {
return val.replace(/[^a-z]/,''); //LOWERCASE, NO SPACE, LETTER ONLY
});
});
$('#namapang').bind('keyup keypress blur', function(){
$(this).val(function(i, val) {
return val.replace(/[^a-z]/,''); //LOWERCASE, NO SPACE, LETTER ONLY
});
});
$('#pwd').on('keyup',function(){
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g,'')); //NO SPACE
});
$('#city').bind('keyup keypress blur', function(){
$(this).val(function(i, val) {
return val.replace(/[^a-zA-Z ]/,''); //LETTER ONLY WITH SPACE
});
});
});
</script>
</head>
<body>
<div id='signup'></div>
</body>
</html>
这是我在第二个文件（z1ajax.php）中的简单代码：
<?php
$onload=isset($_REQUEST['onload'])?$_REQUEST['onload']:null;
if($onload=='yes'){
?>
<br>
<div class='container'>
<div class='row'>
<div class='col-md-4'></div>
<div class='col-md-4'>
<center>
<font size='4'><strong><font color='white'>SIGN UP</font></strong></font><br>
</center>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-envelope'></span></span>
<input type='email' id='email' class='form-control' placeholder='Email aktif'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-pushpin'></span></span>
<input type='text' id='username' class='form-control' placeholder='username'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-credit-card'></span></span>
<input type='text' id='namapang' class='form-control' placeholder='nama panggilan'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-credit-card'></span></span>
<input type='password' id='pwd' class='form-control' placeholder='password untuk login'>
<span class='input-group-addon'><span id='eye' class='glyphicon glyphicon-eye-close' onclick="seppwd('pwd')"></span></span>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-home'></span></span>
<input type='text' id='city' class='form-control' placeholder='kota'>
</div>
<br>
</div>
<div class='col-md-4'></div>
</div>
</div>
<?php
}
?>
$(function() {
$('#signup')
.on('input', '.lowerCase.noSpace', function() {
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g, '')); //NO SPACE
$(this).val($(this).val().toLowerCase()); //LOWERCASE
})
.on('input blur', '.lowerCase.noSpace', function() {
$(this).val(function(i, val) {
return val.replace(/[^a-z]/, ''); //LOWERCASE, NO SPACE, LETTER ONLY
});
})
.on('input blur', '.noSpace', function() {
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g, '')); //NO SPACE
})
.on('input blur', '.letterOnly', function() {
$(this).val(function(i, val) {
return val.replace(/[^a-zA-Z ]/, ''); //LETTER ONLY WITH SPACE
});
});
$.post('/to/z1ajax.php', (data) => $signup.html(data));
});