attach an event to dynamically created forms

Question

I have a simple web page that grabs a list of items from the database and presents them as forms that can be updated by the user. I am trying to grab the submit event and update the form using ajax. I can't figure out how to make my jQuery function aware of my newly created forms though. Here is my HTML:

<body>
  <ul class="flight-list">
    <li>
      <form>form stuff</form>
    </li>
    <li>
      <form>form stuff</form>
    </li>
    <li>
      <form>form stuff</form>
    </li>
    <li>
      <form>form stuff</form>
    </li>
    ... etc
 </ul>
 <form>Form to add new records</form>

The form to create new records works fine exactly as expected, and is not dynamically created.

Here is the jQuery:

Create form:

$('form').on('submit', function(event){
    event.preventDefault();
    var form = $(this);
    var flightData = form.serialize();

    $.ajax({
        type: 'POST', url: '/flights', data: flightData
      }).done(function(data){
        var i = data.length - 1;
        var flight = data[i];
        addFlightsForm([flight]);
        form.trigger('reset');
    });
  });

Update form:

$('form').on('submit', function(event){
    event.preventDefault();
    var form = $(this);
    var flightData = form.serialize();

    $.ajax({
      type: 'PUT', url: '/flights/27', data: flightData
    }).done(function(data){
      // update specific form with new value
    })
  })

I know there is some way to attach an event to a dynamically created element, but I can't figure out how to do it.

What you're looking for is delegated event handling. http://stackoverflow.com/questions/18414695/attaching-events-after-dom-manipulation-using-jquery-ajax — jfive, Feb 27 '15 at 22:55

score 2 · Answer 1 · answered Feb 27 '15 at 22:51

2

Attach listener to document

$(document).on('submit', 'form', yourHandler);

answered Feb 27 '15 at 22:51

Lesha Ogonkov

1,218
8
20

Can you give me an example with my jQuery? `$('document').on('submit', 'form', function(event){alert("hello);});` and nothing is happening. – Arel Feb 27 '15 at 23:10

score 1 · Accepted Answer · answered Feb 27 '15 at 23:13

1

I don't have high enough reputation to add a comment to yours of

"Can you give me an example with my jQuery? $('document').on('submit', 'form', function(event){alert("hello);}); and nothing is happening." but,

make sure you have the code surrounded by

$(document).ready(function () {
//your code
});

answered Feb 27 '15 at 23:13

jfive

56
4

I've done that, but I still can't get anything to show up. Here is the actual file: https://github.com/arelenglish/logbook-web/blob/master/client/public/javascripts/flights.js – Arel Feb 27 '15 at 23:19
The link you posted as a comment on my question perfectly explained what I was doing wrong. Thanks! – Arel Feb 27 '15 at 23:31
In your initial html code, you're missing a end quote (") here:
– jfive Feb 27 '15 at 23:33

score 0 · Answer 3 · answered Feb 27 '15 at 23:18

Take a look at LiveQuery

LiveQuery

This is one getaway-package that will attach event handlers to events happening with elements regardless of whether they're dynamically generated or already present.

var $mylist = $('#mylist');
$mylist.livequery(
    '.element', // the selector to match against
    function(elem) { // a matched function
        // this = elem = the li element just added to the DOM
    }, function(elem) { // an unmatched/expire function
        // this = elem = the li element just removed from the DOM
    });

attach an event to dynamically created forms

3 Answers3