Question

I’m having trouble recreating the issue in jsbin without giving away project-specific details (I’m using JSON from an API), but I’m running into an issue that I can’t seem to get around, and would really appreciate any help or insight.

I start with the following markup:

I have a blank unordered list.

<ul id="results-list">
  <!-- it is blank for now, and will be populated via jQuery -->
</ul>

And also an input.

When that input has been submitted, I run some code to populate #results-list with data, based on a JSON response. All’s well. In that population of the data, I embed links that go nowhere, to make it like a sidebar navigation (user clicks on a link, and the main content area’s content changes accordingly). This works fine the first time around.

Then, I’ve got an anonymous function running inside of .live() for clicking on those links in #results-list.

$("#results-list a").live('click', function(){
    // populate the main content area with the correct information.
});

Okay, so that works just perfectly the first time around. Once the user changes what’s in the input, and resubmits the form, all of the items in the main content area change accordingly, but there are two of them. If they resubmit the form again, there are three. And so on.

So, the main content stuff is duplicated X times, with X being the number of times the form has been submitted.

I realize this is a somewhat vague question, but I wanted to see if anyone had any pointers as to what may be going on? This is all happening within a normal $.getJSON method call.

Any ideas?

Answer 1

If you call the live function after each post, jQuery will just keep adding event handlers to the DOM, so the handler will get called multiple times. To get round this, either just call the live function once, or if you have to set up event handlers after each post use unbind and then a bind function (i.e. bind or something more specific like click).