Having trouble with event binding for dynamically added stuff

Question

I've a simple form that adds keywords and those keywords have delete button, both POST requests, done via ajax. delete request to non-dynamic keywords work via ajax, but dynamically added ones fallback to HTTP request. I read around and its narrowed down the problem to event binding.

var app = {
setupKeywordDeleteForm: function () {
  // Was using regex plugin to find form which had ids like list_1, list_2 etc
  // $("form:regex(id, list_*)").each ( function () {
  $('li').each ( function () {
    var $form = $(this);
    $form.submit(function(e) {
      e.preventDefault();
      $.post($form.attr('action'), $form.serialize(), function() {
      }, "script");
    });
  })
},

setupKeywordAddForm: function () {
  var $form = $('#add_keywords');
  $form.bind('submit', (function(e) {
    e.preventDefault();
    $.post($form.attr('action'), $form.serialize(), function() {
    }, "script");
  }));
},
}

  jQuery(function () {
    app.setupKeywordAddForm();
    app.setupKeywordDeleteForm();
  });

I've been reading learningjquery and messing with livequery plugin, but no avail. I understand the problem, just not able to solve it. Any help is appreciated. Also if you know a better way to define setupKeywordDeleteForm(); without looping, please let me know.

Edit:

The problem is when I add new keywords via ajax, the delete button on them falls back to HTTP request instead of submitting via ajax.

What exactly is your problem? – Andrew Marshall Mar 14 '11 at 01:53 — Andrew Marshall, Mar 14 '11 at 01:53
Sorry if I was unclear, I clarified it a bit more. – sent-hil Mar 14 '11 at 01:59 — sent-hil, Mar 14 '11 at 01:59

score 1 · Accepted Answer · edited May 23 '17 at 12:19

Managed to solve it thanks to this and this. Basically it calls setupNew on div.edit_list:last, i.e. the newly added keyword and sets up .post() on that.

var app = {
setupNew: function () {
  var $form = $('.edit_list:last');
  $($form).submit(function(e) {
      e.preventDefault();
      $.post($form.attr('action'), $form.serialize(), function() {
      }, "script");
    });
},

setupKeywordAddForm: function () {
  var $form = $('#add_keywords');
  $form.submit(function(e) {
    e.preventDefault();
    $.post($form.attr('action'), $form.serialize(), function() {
      app.setupNew();
    }, "script");
  });
}
}

Yes, its a bit ugly, and I should probably DRY that up (I'm guessing I should create a general addKeyword function that accepts inputs and call that function for existing keywords and when new keyword is added?), but it works as of now. Thanks everyone for your help.

score 0 · Answer 2 · answered Mar 14 '11 at 01:56

0

I'm not quite sure what the question is but I think $(selector).live() (http://api.jquery.com/live/) is what you want. it will bind a event listener to all current and future elements with the selector.

answered Mar 14 '11 at 01:56

errorhandler

1,757
3
22
29

Hmm, should I do $('li').live ('each', function () {})...I did, doesn't seem to work. – sent-hil Mar 14 '11 at 02:08
no, live is used to listen to the event so `$form.live('submit' //...` is what you want to do. – errorhandler Mar 14 '11 at 02:23
Why are you doing `'each'`? The first parameter is the event type. – Andrew Marshall Mar 14 '11 at 02:24
There are multiple keywords on the page and I'm using `'each'` to define `setupKeywordAddForm` for each of them. I'm bit new to jQuery, so maybe I'm doing it all wrong? – sent-hil Mar 14 '11 at 03:11
I guess I can call `app.setupKeywordDeleteForm();` on success call back of `setupKeywordDeleteForm();`. I originally put the iteration there since it used ajax on first request, but used http on subsequent ones. – sent-hil Mar 14 '11 at 03:17

Having trouble with event binding for dynamically added stuff

2 Answers2