refreshing content using jquery works only once

Question

Hello!

I am using this jquery function:

$(function() {
  $("#refresh").click(function() {
     $("#category_dialog").load("<?php echo $category; ?>")
  })
});

i am using as well a link with the id="refresh" problem is it reloads the content only once, when i click it second time it doesnt refresh and i know there were changes made. Thanks!

Answer 1

Is the #refresh element part of the code that gets reloaded? If so, you need to rebind the click event, or just use .live(), which is slower but sometimes it comes in handy if not abused.

It would look something like:

$(function() {
    $("#refresh").live('click',function() {
        $("#category_dialog").load("<?php echo $category; ?>");
    });
});

EDIT: One thing I noticed is you don't end all your statements with ;. You might check for parsing errors.

Answer 2

1. make sure your element with id=refresh exists only once in DOM.
2. make sure its(#refresh) is outside #category_dialog. if its inside #category_dialog then your php code should must return the #refresh element again, also u have to rebind your #refresh (to avoid rebinding again use .live())

Answer 3

Double check that you don't duplicate your container ID's.

Try switching to classes:

$(function() {
  $(".refresh").click(function() {
     $(".category_dialog").load("<?php echo $category; ?>")
  })
});

If this works then you know there must be duplicate ID's in the content that has been loaded.