0

I have a webpage with 100+ hyperlinks that all have the onClick and href attribute set. This works for the most part but I've run into the issue where browsers like IE7 use the href attribute over the onClick attribute. I need the onClick attribute to be the default so my function will load on click. I figured I could easily do this using jQuery and setting the click event to the onClick attribute value but I'm not having any luck, how would I go about this? Right now the code below sets TONS of click events to a single hyperlink. When I click a hyperlink I can watch the GET events sent multiple times for the hyperlink.

    $("a[href*='/RightSizeOption/NewForm.aspx']").click(function() {
        OpenPopUpPage($(this).attr('href'), RefreshPage); 
        return false;
    });
Improve this question
13
  • 1
    The best thing would be to just clean up your code once and for all. It will be more maintainable this way. This code would only add a single click event handler per link that matches the selector. Commented Oct 20, 2011 at 0:36
  • So, you're saying you've removed the onclick, and you're using the above code exclusively to set the click handler...Are you sure the click handler is actually being fired more than once? Or is your OopenPopUpPage doing something funky? Try adding a console.log statement inside the click handler to determine how many times it is actually being executed. Commented Oct 20, 2011 at 0:37
  • Also if I put "$(this).attr('href')" in an alert it alerts me 10+ times with the href of the hyperlink I clicked? Commented Oct 20, 2011 at 0:38
  • Show us a sample of your html code with a few links so we can receate the behaviour. Commented Oct 20, 2011 at 0:40
  • This is a SharePoint 2010 page and previously I was setting the onClick event with a function that concatenated the href and the OpenPopUpPage function (a sharepoint function for modal dialogs). I now disabled the script that sets the onclick and tried the above jquery to set a click event and it ends up launching 100+ modal dialogs all to the same page....i think the amount launched equals the amount of hyperlinks Commented Oct 20, 2011 at 0:41

1 Answer 1

Reset to default
1

Doesn't seem to make sense, unless that exact click handler is actually being bound multiple times. A better way of binding clicks is with delegate (also using preventDefault instead of return false for good measure):

$('#myParent').delegate("a[href*='/RightSizeOption/NewForm.aspx']", "click", function(event) {
  event.preventDefault();
  OpenPopUpPage($(this).attr('href'), RefreshPage); 
});

#myParent is any ancestor element that is not expected to get destroyed; could be a wrapper div or 'body' even, though it's better to pick the closest common ancestor that never gets destroyed.

But what worries me is the multiple binding; if your sample code is within a function, that function is being fired multiple times, for example.

I'm also not certain about the "RefreshPage" that you're passing to OpenPopUpPage. I'd have to see what OpenPopUpPage does to even hazard a guess.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

I think you nailed it! I don't know how I looked past that, my script re-fires every 200ms because I am using groupings in SharePoint and the data isnt rendered on the page until a grouping is expanded. So I guess my new question is how do I prevent binding to a click event if one already exists/
If you delegate from within the document ready function, and delegate to an ancestor of all the groupings, it's handled automatically. Another reason to prefer delegate() over click()!
Not really following you here? My other issues is I'm using SharePoint 2010 so all the class and ids are set automatically and can vary from browser to browser as SharePoint renders the page differentely...any suggestions?
Ok I did find that all the hyperlinks for expanding the groupings have this in common <a href="javascript:" ....is there a way in jquery that everytime a grouping is expanded that all new hyperlinks that are rendered to the page can have a click event added to them?
When you delegate, you make an ancestor (or parent, however you want to label it) the event listener, not the anchor tag. So you can say, "body element (or whatever ancestor), I want you to listen for clicks on anchors with this href" (as per my sample). It doesn't matter if more anchor tags get added later, the listener is still the body (or whatever) element.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.