Javascript 正确绑定事件处理程序jquery

我正试图巧妙地打包一些功能，将编辑控件添加到表格单元格中。下面是我试图实现的一个例子

我想知道的是，这是否是正确的方法。当我清空单元格时，我不得不重新绑定事件处理程序。我认为jquery删除了它们，但我不确定。我希望它们会保留下来，因为我已将dom元素保存在ScoreManager对象中

<div id="main">
 <table id="points-table">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
    </thead>
    <tr>
        <td>Joe</td>
        <td>Bloggs</td>
        <td class="points">
            <span>100</span>
            <button>edit</button>
        </td>
    </tr>
    <tr>
        <td>Jiminy</td>
        <td>Cricket</td>
        <td class="points">
            <span>77</span>
            <button>edit</button>
        </td>
    </tr>
 </table>
 </div>

 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript">
window.onload = init;

var ScoreManagers = [];

function init() {
    $('#points-table .points').each(function(){
        ScoreManagers.push( new ScoreManager(this) );
    });
}

var ScoreManager = function(cell) {
    this.cell = $(cell);
    this.edit = $('button', this.cell);
    this.points = $('span', this.cell);
    this.scoreInput = $('<input>');
    this.submit = $('<button>Submit</button>');
    this.cancel = $('<button>Cancel</button>');

    this.init();
};

ScoreManager.prototype.init = function() {
    this.edit.bind('click', $.proxy(this.showEditControls, this));
};

ScoreManager.prototype.showEditControls = function(e) {
    this.cell.empty();
    this.cell.append(this.scoreInput, this.submit, this.cancel);
    this.submit.bind('click', $.proxy(this.savePoints, this));
    this.cancel.bind('click', $.proxy(this.cancelEdit, this));
};

ScoreManager.prototype.cancelEdit = function() {
    this.cell.empty();
    this.cell.append(this.points, this.edit);
    this.edit.bind('click', $.proxy(this.showEditControls, this));
}

ScoreManager.prototype.savePoints = function() {
    this.cell.empty();
    this.points.text(this.scoreInput.val());
    this.cell.append(this.points, this.edit);
    this.edit.bind('click', $.proxy(this.showEditControls, this));
}

 </script>

名字
姓
要点
乔
布洛格斯
100
编辑
吉米尼
板球
77
编辑
window.onload=init；
var得分管理器=[]；
函数init（）{
$（'#points table.points'）。每个（函数（）{
ScoreManager.push（新的ScoreManager（this））；
});
}
var ScoreManager=函数（单元格）{
this.cell=$（cell）；
this.edit=$（'button'，this.cell）；
this.points=$（'span'，this.cell）；
this.scoreInput=$（''）；
this.submit=$（'submit'）；
this.cancel=$（'cancel'）；
this.init（）；
};
ScoreManager.prototype.init=函数（）{
this.edit.bind（'click'，$.proxy（this.showEditControls，this））；
};
ScoreManager.prototype.showEditControls=函数（e）{
this.cell.empty（）；
this.cell.append（this.scoreInput、this.submit、this.cancel）；
this.submit.bind（'click'，$.proxy（this.savePoints，this））；
this.cancel.bind（'click'，$.proxy（this.cancelEdit，this））；
};
ScoreManager.prototype.cancelEdit=函数（）{
this.cell.empty（）；
this.cell.append（this.points，this.edit）；
this.edit.bind（'click'，$.proxy（this.showEditControls，this））；
}
ScoreManager.prototype.savePoints=函数（）{
this.cell.empty（）；
this.points.text（this.scoreInput.val（））；
this.cell.append（this.points，this.edit）；
this.edit.bind（'click'，$.proxy（this.showEditControls，this））；
}

bind

在删除元素后将不起作用。它会将一个事件附加到所有已经可用的元素上，但如果删除该元素，binidng将丢失。新添加的元素也将没有绑定。您可能会发现，允许使用指定的选择器将事件绑定到元素是有用的，无论它是否已经存在或将在以后添加。但是，如果您使用的是最新的jQuery，那么可能需要使用替代方法，因为它已经过时了。此外，您可能会发现使用

.detach（）

而不是

.empty（）

是有用的，因为detach保留事件处理程序绑定。但是您需要将代码修改为

this.cell.detach（）

将删除整个单元格），而不是它的子单元格。

您应该看看浏览器中的事件委派和事件冒泡，这是一个好地方

然后看看以一种简单的方式实现委托的方法

现在，将事件绑定到考虑中的顶级元素，该元素不会被删除并添加到DOM中，它也可以是body，并委托给您想要的元素

$('#points-table').on('click', '.points', function(){
  //what should be done when you click a point element
  });