How to bind $.UIDeletable if I updated the DOM

[zhuochun]

If I have a ul list, and associated with $.UIDeletable.

In other part of the app, I appended new li child to the list, $.UIDeletable won't bind to the new li item.

If I try to initial $.UIDeletable again on the list, the old li items will have two delete icons.

Version: 3.5.2

[sourcebits-robertbiggs]

I'll check in an update to fix that shortly.

[zhuochun]

This is my temporary fixes:

function rebindDeletable(list) {
  $(list).closest('article').prev().find(".button.align-flush").off().remove();
  $(list).off();
  $(list).find(".deletion-indicator").off().remove();
  $(list).find(".button.delete").off().remove();

  $.UIDeletable({
    list: list,
    callback: function(item) {
    var text = $(item).siblings('h3').text();
        $('#response').html('You deleted: <strong>' + text + '</strong>');
    }
  });
}

[sourcebits-robertbiggs]

Get commit 6ad9a3a. The deletableList.js file has been updated to allow adding dynamic content after initialization. Just run the $.UIDeletable method with your options defined again. You might just want to assign the deletable initialization to a variable so you can just call that. Something like

var deletable = $.UIDeletable({
   list: list,
   callback: function(item) {
      var text = $(item).siblings('h3').text();
      $('#response').html('You deleted: <strong>' + text + '</strong>');
   }
});

Then you can just do: deletable() to reinitialize the deletable list.

[zhuochun]

:+1: