Question

Right so I’m making a news system that uses jQuery and AJAX for the admining. Everything works great except that when I create a new post, and it is added to the table of news articles with AJAX I can’t then edit it without refreshing the page. My create form is using a .submit() event and so is my edit form. When a new article is posted, the edit form works but the submit button doesn’t work because it is created outside of the current .submit() scope.

Here’s some quick pseudo code.

My PHP script generates a table with a row of the news articles and then a hidden row beneath each news article that holds the form. jQuery activates the table row when the Edit link is pressed.

<tr>
  <td>news article</td>
</tr>
<tr style="display:none;">
  <td>hidden edit form</td>
</tr>

And then my javascript looks like:

$('#newsCreate').submit(function() {
    // do some ajax stuff to create news
    // when we add the news to the list we must add the table structure
    // so that means we have to add a form with an ID of "newsEdit"
    // as that is how the event is triggered
});

$('#newsEdit').submit(function() {
    // do some ajax stuff to edit news
    // this works perfectly by itself, but when the form is dynamically created
    // with the newsCreate block, this is outside the scope
});

So hopefully with my comments you can see what is going on. How can I fix this without copy/pasting 30 lines of code inside the newsCreate.submit()?

Answer 1

swap submit with

`.live('submit',function(e){...});'

here is the documentation for it
http://api.jquery.com/live