使用jQuery删除图像并重新附加图像时，不会触发载入事件

Question

I'm trying to add load event to img tag when the src of the image is changed. The image is deleted and reattached due to a plugin, so I can't really changed that. This is my simplified HTML

<div class="twitter">
    <img src="picture.jpg" />
</div>

And this is my Backbone script

var TwiterView = Backbone.View.extend( {
    render : function() {
        var self = this;

        this.$el.on('load', 'img', function() {
            self.updateTwitterPreview();
        }).each(function() {
            if(this.complete) $(this).trigger('load');
        });

        this.$el.find('img').on("remove", function () {
            alert("Element was removed"); // This one got fired when the event is removed
        });
        return this;
    },
    updateTwitterPreview: function() {
        alert('test'); // This one got fired when the page is loaded the first time, but not when the image is changed
    }
});

I'm trying to use delegated event but it didn't really work.

Answer 1

I think this.$el returns the actual image element

For delegated event you should use a parent element

instead of this

this.$el.on('load', 'img', function() {

try using this

$(document).on('load', 'img', function() {

here $(document) element can be anything which is parent to the image elements