I have 2 HTML files.
In First.html I want to include Second.html. When i click on Login button , I was uanble to get the data or control from the in js file.
First.html
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src="js/first.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Second.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='js/jquery.js'></script>
</head>
<body>
<div>
<div data-role="fieldcontain">
<label id="luserid" ><strong>UserId : </strong></label>
<input type="text" name="userid" id="userid" value="" class="logon" placeholder="Username" required/>
</div>
<div data-role="fieldcontain">
<label id="lpassword"><strong>Password :</strong></label>
<input type="password" name="password" id="password" class="logon" value="" placeholder="Password" required/>
</div>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a data-role="button" id="loginbtn" data-theme="b">Login</a></div>
</fieldset>
</div>
</div>
</body>
</html>
first.js
$(document).ready(function(){
$('#content').load('login.html');
$("#loginbtn").click(function () {
alert("Inside Login");
});
});
Help me out on this….
You should attach the
clickhandler inside aloadcallback:The reason your code fails, is because the
#loginbtnelement may not yet exist when you try to set theclickhandler.