jQuery Not selector causes infinite loop

Question

The following code causes my browsers to crash. For Firefox, i've been given an option whether or not i want to stop jQuery because it was running longer than it should be.

div id="divLeaving">
    You are about to leave to: <span id="spanLeavingURL"></span>
    <a id="divLeavingYes" href="#">Yes</a><a id="divLeavingNo" href="#">No</a>
</div>
<a href="http://www.google.com"&gt;google&lt;/a&gt;

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $("a:not(#divLeavingYes, #divLeavingNo)").click(function() {
            var url = $(this).attr("href");
            var test_if_local = url.indexOf("mycompany.com");
            if (test_if_local == -1) {
                $("#spanLeavingURL").text(url);
                $("#divLeavingYes").attr("href", url);
                $("#divLeavingNo").click(function() { $(this).dialog('destroy'); });
                $("#divLeaving").dialog({ modal: true });
                return false;
            }
        });
    });
</script>

However, if i remove the not selector it doesn't crash my browser.

<div id="divLeaving">
    You are about to leave to: <span id="spanLeavingURL"></span>
    <a id="divLeavingYes" href="#">Yes</a><a id="divLeavingNo" href="#">No</a>
</div>
<a href="http://www.google.com"&gt;google&lt;/a&gt;

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $("a").click(function() {
            var url = $(this).attr("href");
            var test_if_local = url.indexOf("mycompany.com");
            if (test_if_local == -1) {
                $("#spanLeavingURL").text(url);
                $("#divLeavingYes").attr("href", url);
                $("#divLeavingNo").click(function() { $(this).dialog('destroy'); });
                $("#divLeaving").dialog({ modal: true });
                return false;
            }
        });
    });
</script>

How do i change thes query so it selects all except for #divLeavingYes and #divLeavingNo?

Answer 1

try with this, I include "event.stopPropagation();":

$(document).ready(function() {
    $("a:not(#divLeavingYes, #divLeavingNo)").click(function(event) {
    event.stopPropagation();
        var url = $(this).attr("href");
        var test_if_local = url.indexOf("mycompany.com");
        if (test_if_local == -1) {
            $("#spanLeavingURL").text(url);
            $("#divLeavingYes").attr("href", url);
            $("#divLeavingNo").click(function() { $(this).dialog('destroy'); });
            $("#divLeaving").dialog({ modal: true });
            return false;
        }
    });
});

Answer 2

I'm not sure how your HTML is structured, but perhaps you could get jQuery's slice() filter to do the trick...

http://docs.jquery.com/Traversing/slice

Answer 3

I don't know about jQuery's implementation, but:

a:not(#divLeavingYes, #divLeavingNo)

is not a valid CSS3 Selector. The :not selector can only take a simple selector. Try:

a:not(#divLeavingYes):not(#divLeavingNo)