[jQuery] Handling client side generated controls using jquery
Hi,
I am new to Jquery and i am very much enjoying in learning the
new concepts of Jquery. Today, when i am learning i faced a situation
for which i need some help.
The following is the code snippet which i created :
<head>
<title></title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Alert message to be fired for hyperlink click
$("a").click(function(e) {
alert('Hyperlink clicked');
});
//Alert message to be fired for button2 click event and
also a new hyperlink will be created inside the btndiv in client side
$(".btn2").click(function(e) {
alert('Button2 clicked');
$("#btndiv").html('Button 3:<a href="#"
class="btn3"><bClick Button3</a>');
});
});
</script>
</head>
<body>
Button 1:
<a href="#" class="btn1">Click Button1</a> <br />
Button 2:
<a href="#" class="btn2">Click Button2</a> <br /><br />
<div id="btndiv"></div>
</body>
The above code snippet creates the following output :
----------------------------------------------------------
Button 1:Click Button1
Button 2:Click Button2
----------------------------------------------------------
After this if i click on the "Button 1", a message/alert box is fired
and the same is for "Button 2" also and a new hyperlink is also
created in the "btndiv" named div.
After the "Button 2" click event, the following is the output :
----------------------------------------------------------
Button 1: Button1
Button 2: Button2
Button 3:Button3
----------------------------------------------------------
This is where i am facing a problem. As you can see from the above
code, i am trying to fire an alert box for all the anchor/hyperlinks.
Now the alert box is getting fired for the "Button 1" & "Button 2",
but not for the "Button 3".
Can anyone help me to solve this issue. Quick response can be
appreciated.
Thanks & Regards,
G. Vishnu Kiran Reddy
Hyderabad.
Ph: +91-9849882006