my full script is running but when i click on div then div is not getting hide but i have written code to hide it….can any one tell me where i made the mistake.
here is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.lnkcss
{
margin-left:350px;
}
.BusyStyles
{
background-image: url('images/ajax-loader.gif');
background-repeat: no-repeat; background-position: center center;
}
#transition {
display:none;
position:absolute; top:50%; left:50%; z-index:50;
border:1px solid #666;
width:100px; height:100px;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#lnk').click(function (e) {
$('body').append('<div id="transition"></div>').show();
var $t = $('#transition'),
to = $(this).offset(),
td = $(document);
//$t.children('div').css({ width: 100, height: 100 });
$t.css({
top: to.top + 50,
left: to.left + 50,
display: 'block'
}).animate({
top: td.height() / 2,
left: td.width() / 2
}, 600, function () {
$(this).animate({
top: '-=75',
left: '-=50'
}, 600);
$(this).animate({
width: 250,
height: 200
}, 600, function () {
$('#transition').addClass("BusyStyles");
});
});
return false;
});
$('#transition').click(function (e) {
alert('pp');
$(this).hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a href="#" id='lnk' class="lnkcss">FeedBack</a>
</form>
</body>
</html>
$('#transition').click(function (e) {
alert('pp');
$(this).hide();
});
the above line i wrote to hide div but it is nothing happen when i click on div.
The event is applied on every ‘#transition’ element that exists at the time, you try to instantiate the handler. You don’t have such an element at this time, as it’s created dynamically.
You can apply the event handler right after creating the element:
http://jsfiddle.net/Du5k8/