I am just started using jQuery to simplify my JavaScript programming
but I am running into this problem where my event handlers are not
binding properly to my event handler when I am creating these links
dynamically using jquery. I am sure this is a common problem but I
just need to be pushed to the right direction to fix this. Could
someone lend a hand, please?
Below is a simple example what I'm trying to do. When the page loads,
there is a link called Foo and will say "hi" when clicked. There's
another link below it that adds more Foo links BUT those newly added
Foo links will no longer say "hi" anymore when you click on them. How
do I make them say "hi" again? I tried rebinding it but it doesn't
work.
<body id="body">
<a class="foo" href="#">Foo</a>
<a id="addLink" href="#">Add Link</a>
</body>
$(document).ready(function() {
$('#addLink').click(function() {
var html = "<a class='foo' href='#'>Foo</a>;
$('#body').append(html);
});
}
$(document).ready(function() {
$('.foo').click(function() {
alert("hi");
});
}
