javascript - 为什么这个 jquery 脚本在更新表时创建多个警报

Question

我有一个小脚本(我是一个业余爱好者)，它允许通过单击并更新弹出窗口来更新 a 的文本。它有效，但是当我测试它时，我注意到每次我单击 a 时，它似乎都包含上次的信息，这意味着每次我单击 td 时，脚本运行时间更长(通过警报触发看到第一次点击一次，第二次点击两次，依此类推)。我假设它与 $(this) 有关。是的，我知道有一个表更新插件，但对于我的用户将进行的三到四次编辑来说，它太过分了。这是代码和一个 jsfiddle http://jsfiddle.net/alsosun/QuLQH/1/ :

// clicking on a TD cell to update it
$('td').on('click', function () {

    $('#pop').popup('open');
    var cell = $(this).text();
    var org = $(this);
    $('#txt').val(cell);

    $('#close').on('click', function () {

        var TXT = $('#txt').val()
        alert(TXT)
        $(org).text(TXT)
        org = ""
    });

});

我必须添加 org = ""才能使其正常工作——不确定为什么。脚本运行后是否应销毁所有 var？

这是 html:

<table border="1">
    <tr>
        <td>click</td>
        <td>this</td>
    </tr>
    <tr>
        <td>thought</td>
    </tr>
</table>
<div id="pop" data-role="popup">
    <input id='txt'></input> <a href='#' data-role='button' data-rel="back" id='close' </div>

Answer 1

将 #close 的绑定(bind)移动到您的 td 处理程序之外，否则当您单击 td 时它会一直重新绑定(bind)，因此多个细胞更新!我还使 org 成为全局变量，每当单击 td 时，都会为 this 分配适当的值。最终代码:http://jsfiddle.net/QuLQH/2/

var org;
$('td').on('click', function() {
    $('#pop').popup('open');
    var cell = $(this).text();
    org = $(this);
    $('#txt').val(cell)

});

$('#close').on('click', function(event) {
      var newTXT = $('#txt').val()
      //alert(newTXT) 
      $(org).html(newTXT)        
});