在jquery中使用追加创建文本框和按钮(我得到重复的结果）

Creating Textbox and Button using append in jquery (I'm getting duplicate result)

本文关键字：结果 按钮 jquery 追加 文本 创建      更新时间：2023-09-26

我对jquery很陌生。在这里，我要做的是创建文本框和按钮（登录表单）。下面的代码给了我重复的结果。我的代码有问题吗？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {    
        $(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
        return false;
        });     
</script> 
<br>
<br>
      <div class="start">
        <label class="control-label" for="inputEmail">Sign In to xRM 360</label>
      </div>
<br>
<br>      
</body>
</html>

正在发生的事情是 $（document）.ready 被调用了两次。我认为这可能与jQuery mobile有关。

看这里：jQuery $（document）.ready （） 触发两次在这里：http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice了解更多信息。

快速解决方法是将脚本标签放在 head 标签中。请参阅下面的示例。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {       
        $(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
        return false;
        });     
</script> 
</head>
<body>
<br>
<br>
      <div class="start">
        <label class="control-label" for="inputEmail">Sign In to xRM 360</label>
      </div>
<br>
<br>      
</body>
</html>
相关文章：