jquery click event keeps unbinding

Question

When I run the code the click event works the first time. When I click it more then one time it seems that the click even has unbounded. How do I keep the click event bounded?

var Categories = function() {
        $("select[id^='CategoryListBox-']").click(
        function() {
            SelectedItem = $(this).val();
            $(this).parent().load('/Categories/CategoryPicker?CatID=' + SelectedItem);

            //send CatID to the requesting page
            $('form#SubmitPost').prepend('<input id="CatID" name="CatID" type="hidden" value="' + SelectedItem + '" />');
        });
    }

    Categories();

Alex Sexton · Accepted Answer · 2010-02-22 02:21:25Z

3

You are overwriting the click handler by replacing the dom inside of it's parent element. You can use live instead to always keep the binding.

Line 2 would be:

$("select[id^='CategoryListBox-']").live('click',

And that should do it

answered Feb 22, 2010 at 2:21

Alex Sexton

10.4k2 gold badges32 silver badges42 bronze badges

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

2 Comments

Luke101 Over a year ago

I have another problem. Is there a way to access the new loaded items? I can access the old items but I can't access the new items

Alex Sexton Over a year ago

you should ask a new question

cletus · Accepted Answer · 2010-02-22 02:28:48Z

1

It looks like you are using AJAX to load new HTML from the server and you're overwriting the existing select box with a new one. This will remove event listeners. One solution is to use live():

$("select[id^='CategoryListBox-']").live("click", function() {
  SelectedItem = $(this).val();
  $(this).parent().load('/Categories/CategoryPicker?CatID=' + SelectedItem);

  //send CatID to the requesting page
  $('form#SubmitPost').prepend('<input id="CatID" name="CatID" type="hidden" value="' + SelectedItem + '" />');
});

One suggestion: don't use an attribute selector like this. Give all the relevant select boxes a class like "category" and then do:

$("select.category").live("click", function() { ... }

It's much faster.

Lastly, this is a better way of creating your hidden inputs:

$("<input>").attr({id: "CatID", name: "CatID", type: "hidden", value: SelectedItem}).prependTo("#SubmitPost");

The reason being that this creates the DOM element directly rather than interpreting HTML, which again is much slower.

edited Feb 22, 2010 at 2:28

answered Feb 22, 2010 at 2:21

cletus

627k169 gold badges922 silver badges945 bronze badges

2 Comments

Alex Sexton Over a year ago

cletus brings up a very valid other point that you should definitely not be using a selector like that.

Luke101 Over a year ago

I have another problem. Is there a way to access the new loaded items? I can access the old items but I can't access the new items

Peter Rowell · Accepted Answer · 2010-02-22 02:23:06Z

1

Are you possibly creating/re-creating the object and then failing to re-bind the event? I have one site where we do a fair amount of AJAX updating (using the jQuery taconite plugin), and the last thing we do is explicitly bind the click events on the newly created DOM objects.

answered Feb 22, 2010 at 2:23

Peter Rowell

17.8k2 gold badges52 silver badges65 bronze badges

Comments

sbleon · Accepted Answer · 2010-02-22 02:25:29Z

1

I think that when you load() into parent(), you're replacing the original CategoryListBox-* element with a new one. The new one has nothing bound to it. You can either re-bind the function to the new element, which would be ugly and possibly get you into a nasty recursion situation, or you can use the .live() function to bind Categories() to any DOM element with the id of CategoryListBox-*. That would look something like:

$("select[id^='CategoryListBox-']").live('click', function() { [body of your Categories() function] } );

http://api.jquery.com/live/

This will work in jQuery 1.3+. If you're using 1.2, you should upgrade or use the livequery plugin to get similar functionality.

answered Feb 22, 2010 at 2:25

sbleon

1,6852 gold badges13 silver badges20 bronze badges

1 Comment

Luke101 Over a year ago

I have another problem. Is there a way to access the new loaded items? I can access the old items but I can't access the new items

Collectives™ on Stack Overflow

jquery click event keeps unbinding

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related