正确绑定事件处理程序jquery

时间:2012-08-26 22:27:48

标签: javascript javascript-events jquery

我正在尝试整齐地打包一些功能,将编辑控件添加到表格单元格中。以下是我想要实现的一个例子。

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

<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>

2 个答案:

答案 0 :(得分:1)

你应该看一下浏览器中的事件委托和事件冒泡,PPK blog是一个好地方。

然后看看jQuery on方法,它以一种优雅的方式实现委派。

现在将事件绑定到正在考虑的顶部元素,该元素未被删除添加到DOM,它也可以是正文,并委托给您想要的元素。

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

答案 1 :(得分:0)

删除元素后,

bind将无效。它会将事件附加到所有已经可用的元素,但如果删除该元素,binidng将丢失。新添加的元素也没有绑定。您可以找到有用的jQuery.live,它允许将事件绑定到具有指定选择器的元素,无论它是否已存在或将在以后添加。但是,如果您使用的是最新的jQuery,则可能需要使用替代方法,因为它已被删除。此外,您可能会发现使用.detach()代替.empty()很有用,因为detach会保留事件处理程序绑定。但是您需要修改代码,因为this.cell.detach();将删除整个单元格而不是仅删除其子代。