Question

I want to select all internal links, which are in my document, but not that which are in a special div.

Following shows an example of my site layout:

<div id="toppanel">
    <a href="test.php">Test</a>
</div>
<div id="page">
    <div id="content"></div>
    <div id="menu">
        <a href="menu1.php">Menu1<a>
        <a href="menu2.php">Menu2<a>
    </div>
</div>
<div id="footer">
    <ul>
        <li><a href="index.php">Startseite</a></li>
        <li class="sep">|</li>
        <li>Datenschutz</li>
        <li class="sep">|</li>
        <li>Impressum</li>
    </ul>
</div>  

My jQuery code is following:

$("a[target!='_blank']").not('#toppanel').live("click", function(event) {
    event.preventDefault();

    var href = $(this).attr('href');
    $.get(href, function(data) {
         $('#content').html(data);
    });
});

The problem is that with this none of the links are working. If I use the jQuery code without the not() statement, all links working correct, but also that one in the #toppanel-div, which I want to prevent, because that links are used in another way.

Answer 1

Try checking the parent elements of the clicked to see if it is a child of #toppanel :

$("a[target!='_blank']").live("click", function(event) {
    if (!$(this).closest("#toppanel").length) {
        event.preventDefault();

        var href = $(this).attr('href');
        $.get(href, function(data) {
             $('#content').html(data);
        });
    }
});

Example fiddle