too much recursion error in jquery

问题:

this code:

$(document).ready(function() {
$('body').click(function(evt) {
if(evt.target.nodeName === 'A' && $(evt.target).hasClass('cross-link')) {
$('a[href=#2]').trigger('click');
} });});

given me and error of "too much recursion"

one might think that I should just attach a handler to the crosslink element. i tried this, but I couldn't get it to work because the DOM loads before the cross-link class elements are created. what do I need to do to fix this or do you have a better idea of what I should do to implement what I'm trying to do?

if you want to see the error for yourself, do to eataustineat.com/testfolder/ type in a 'd' in the search field select dog almighty (this is where you should notice the "too much recursion error" it will move the div to the left, but it will do so very buggily.

回答1:

You can use live or delegate to add listeners for elements that are created later:

$("a.cross-link").live("click", function()
{
   $('a[href=#2]').trigger('click');
   window.location.hash = "#2";
});

However, click does not trigger the default event of going to the URL, so you need to do that manually.

回答2:

If elements that need an existing event are added after document creation you can use live

$(document).ready(function() {
    $('.cross-link').live(function() {
        $('a[href=#2']).click(); //No cross-link class allowed on this element as it is responsible for the recursion
    });
});

回答3:

Well the recursion comes from triggering

$('a[href=#2]').trigger('click');

When this element is clicked from the event it throw yet another event which will be handled by the same code and so on.

This should work:

    $(document.ready)(function(){
      $('.cross-link').click(function(){
       #('a[href=#2').click();
});
});

Also performance-wise it is more optimal to add an id to your second link because selecting by an id is faster than selecting by an attribute. If you still want to go with selecting by href and there is only one such link do:

#('a[href=#2 :first').click();

回答4:

for referance to my comment above this is how i did it. I recommend using live tho...

var open = function (myObj, animationTime) {
    //do stuff
    $(myObj).unbind('click');
    $(myObj).click(function () {
        close(myObj, timer);
    });
}

var close = function (myObj, animationTime) {
    //dostuff
    //remove close click event and then rebind the click event to open
    $(myObj).unbind('click');
    $(myObj).click(function () {
        open(myObj, timer);
    });
}

$(".mySelector").click(function () {
    open($(this), timer);
});

回答5:

$('body').click(function(evt) {
    if(evt.target.nodeName === 'A' && $(evt.target).hasClass('cross-link')) {
        $('a[href=#2]').trigger('click');
    }
  });

You miss the else of if-else statement.