Question

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

Answer 1

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

见这里： jQuery $(document).ready () fires twice 和这里： 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>

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

1 个答案: