Javascript 在jquery中使用append创建文本框和按钮（我得到重复的结果）_Javascript_Jquery_Html_Jquery Mobile

Javascript 在jquery中使用append创建文本框和按钮（我得到重复的结果）

javascript jquery html jquery-mobile

Javascript 在jquery中使用append创建文本框和按钮（我得到重复的结果）,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我对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/jque

我对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>


$（文档）.ready（函数（）{
$（“.start”）.append（'用户名：
密码：'）；
返回false；
});     




登录到xRM 360

发生的是$（文档）。ready被调用了两次。我认为这可能与jQuery mobile有关

请看这里：在这里：了解更多信息

一个快速修复方法是将script标记放在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>


$（文档）.ready（函数（）{
$（“.start”）.append（'用户名：
密码：'）；
返回false；
});     




登录到xRM 360

重复结果是什么意思。这是演示，我觉得不错。解释一下你的问题。我用记事本++编写，保存为html并在浏览器（chrome）中运行，它给了我两个登录表单，如用户名：密码：登录用户名：密码：登录删除jquery。mobile-1.3.2.min.jsI已删除，现在一切正常。感谢Outlooker。重要提示：使用$（document）.bind（'pageinit'），而不是$（document）.ready（）。在jQuery中学习的第一件事是调用$（document）.ready（）函数中的代码，以便在加载DOM后，一切都将立即执行。但是，在jquerymobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，而DOM就绪处理程序只对第一个页面执行。要在加载和创建新页面时执行代码，可以绑定到pageinit事件。本页底部详细解释了此事件。谢谢你的信息@Omar