Question

I know subject was not clear but I couldn’t find a better sentence.

I am building an ajax form. Currently I can save form fields into db via clicking save button and getting values from db with edit button. I also change the #id of save button when edit button clicked. But the button still act as it is save button however I change it’s #id.

Here is my button:

<a class="btn" id="save_post">Save Post</a>

When I click on edit button I change form values and also change #id of Save Post button;

$('#save_post').attr('id','edit_save_post');

After all, Firebug shows everything OK, #id changed.

<a class="btn" id="edit_save_post">Save Post</a>

But when I click on button it doesn’t run update db, it runs again save. How can I have browser forgot old #id?

Thanks,

Answer 1

You most likely bound your handlers using $('...').click(yourfunction);
That binds them to the matching elements at this very moment.

If you are adding/changing elements dynamically, use live events: $('...').live('click', yourfunction);

Update:

.live() is deprecated by now; use $(ancestor).on('click', 'selector', yourfunction) instead with ancestor being an element or selector that already exists and contains the related elements selected by selector; to mimic .live() you’d use document as the ancestor.