Question

我正在使用localStorage构建智能手机应用。一切顺利，直到我采取行动。这是JS：

var ls = localStorage,
    $input = $('#add-movie'),
    $content = $('.content'),
    $tools = $('.tools');

var movy = {
    // returns the next id 
    // prev id is stored in ls
    nextId: function() {
      var i = ls.getItem('index') || 0;
      i++;

      ls.setItem('index', i);
      return i;
    },

    getRelease: function(name, cb) {
        cb('12/4'); // only temporary
    },

    // adds a new movie to the localStorage
    new: function(name) {
        var data = {
            name: name
        };

        movy.getRelease(name, function(results) {
            data.release = results;
        });

        ls.setItem(movy.nextId(), JSON.stringify(data));
    },

    // show all films
    renderAll: function() {
        $tools.hide();
        var html = '';

        for (var i = 1; i < ls.length; i++) {
            var item = JSON.parse(ls.getItem(i));
            if (!item) { }
            else
                html += '<tr data-index="' + i + '"><td class="name">' + item.name + '</td><td class="date">' + item.release + '</td></tr>';

        }

        $content.html(html);
    },

    remove: function(key) {
        ls.removeItem(key);

        for (var i = key + 1; i <= ls.length; i++) {
            var item = ls.getItem(i);
            ls.setItem(i - 1, item);
        }

        // decriment i
        var index = ls.getItem('index');
        index--;
        ls.setItem('index', index);
    }
}

$(function() {
    movy.renderAll();

    $('form').submit(function(e) {
        e.preventDefault();

        movy.new($input.val());
        console.log($input.val());

        movy.renderAll();
        console.log('rendered');
    });

    $('.content tr').click(function() {
        $(this).toggleClass('checked');
        $tools.toggle();

        $tools.find('#trash').attr('data-index', $(this).attr('data-index'));
    });

    $('#trash').click(function() {
        var i = $(this).attr('data-index');
        console.log(i);
        movy.remove(i);
        movy.renderAll();
        // now nothing works until page is refreshed
    });
});

现在，在我第一次刷新页面时，它会响应点击次数，在需要时显示工具栏，一切都很棒。
但是，点击垃圾箱后，它成功删除了该项目重新呈现所有元素，突然jQuery停止侦听点击，整个事情变得没有响应。也就是说，直到我刷新页面。
谢谢！

Answer 1

将我的评论解决问题解答：

如果要重建所有DOM元素（例如创建新的DOM元素），那么事件处理程序将绑定到旧的DOM元素，并且新DOM元素上没有事件处理程序。

您必须使用委托事件处理（将事件处理程序附加到静态父对象）或将新事件处理程序分配给新创建的DOM元素。有关如何进行委派事件处理，请参阅this answer。

jQuery在渲染元素后停止侦听点击

1 个答案: