jQuery how to set click on href in the div?

Question

Good day,

I want to set click event on every anchor element in my div container. Here is an example what I want to do:

---HTML---
<div id="my-container">
    <a href="page1.html">page1</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
</div>

---- jQuery ----
$("#my-container a").click(function() {
    var link = $(this).attr("href");
    $("#my-container").load(link);
});

What I want to do is to let me handle loading event of href clicks and load it to the same container. And this is must done without id, class attributes which aren't available for that hrefs. The problem is in this: $("#my-container a"). Any help would be appreciated! Thanks

UPDATE

People doesn't seem to get right what I wanted to ask. I repeat myself again. $("#my-container a") <---- doesn't add click events on href anchors. So how I can set click event?

Answer 1

You forgot to quote the href string literal:

var link = $(this).attr("href");
                        ^    ^

Also, you will need to cancel the default behavior of the click event. Currently, your event handler would fire, but you would not see the result, as the browser continues to follow the link you have clicked. Add a return false; as the last line of the event handling function to cancel this behavior.

Answer 2

You can do like:

$(function(){
    $("#my-container > a").click(function() {
        var link = $(this).attr('href');
        $('#my-container').load(link);
        return false;
    });
});

But if you meant that you don't want to give the div any id or class then any div having links inside it will also be affected. So you should at least give the id to the div you want to load the content in.

Answer 3

Add return false;.

$("#my-container a").click(function() {
    var link = $(this).attr("href");
    $("#my-container").load(link);
    return false;
});

Answer 4

Try this, wasn't sure if you were missing any tags so I've put the whole thing in:

<script type="text/javascript">
     $(document).ready(function(){
        $("#my-container a").click(function(event) {
            alert('test');
            var link = $(this).attr("href");
            $("#my-container").load(link);

            event.preventDefault();
        });
     });

</script>

Answer 5

Have you try it with the bind function:

$("#my-container a").bind("click", function() {
    var link = $(this).attr("href");
    $("#my-container").load(link); 
});