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

Question

I am very new to jquery. Here what I'm trying to do is creating text box and button(login form). The following code is giveing me duplicate result. Is there something wrong with my code?

<!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>

what do u mean by duplicate result.Here is the demo http://jsfiddle.net/CPwV3/ and it looks fine to me. — iJade, Oct 17 '13 at 04:28
I'm writing it in notepad++ and save it as html and run in browser(chrome) and it's giving me two login form like User Name: Password: Sign In User Name: Password: Sign In — ksh, Oct 17 '13 at 04:34

score -1 · Answer 1 · edited May 23 '17 at 12:10

What is happening is the $(document).ready is being called twice. I think this may have to do with jQuery mobile.

See here: jQuery $(document).ready () fires twice And here: http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice for more information.

A quick fix is to put the script tag in the head tag. See example below.

<!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>

**Important: Use $(document).bind('pageinit'), not $(document).ready()** The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page. http://jquerymobile.com/demos/1.2.0/docs/api/events.html — Omar, Oct 17 '13 at 08:33

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

1 Answers1