Question

jquery this用法

页面程序如下：
<script src="jQuery-3.2.1.js"></script>
<style>

table{
background-color: #5bc0de;

}
td{
width: 50px;
border: 1px solid black;
}
</style>

<table>
<tr>
<td id="test">1</td><td>2</td><td>3</td><td>4</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td>2</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td>2</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

<div id="insert_txt" hidden="hidden">
<input id="aaa" type="text" />
<button id="confirm">确定</button>
</div>

</div>
<script>

$("table").on("click","td",function(){

var n=$(this);

$("#insert_txt").prop("hidden",false);
$("#confirm").click(function() {
var txt = $("#aaa").val();
n.html(txt);
$("#insert_txt").prop("hidden", true);
})
})
</script>
</body>
</html>

当第二次修改单元格时，不知道为什么前面的修改过的单元格也被修改了，哪位大牛给指点下该怎么做

Answer 1

问题出在按钮$('#confirm')事件重复绑定上, 将中间那段代码修改如下即可:

$("#confirm").off().on('click', function () {
   var txt = $("#aaa").val();
   n.html(txt);
   $("#insert_txt").prop("hidden", true);
});

还提供了另外一个实现办法供参考:

(function () {
    var $td;
    var inputDiv = $('#insert_txt');
    var input = $('#aaa');
    var btn = $('#confirm');
    $("table").on('click', "td", function (e) {
        $td = $(e.currentTarget);
        inputDiv.prop("hidden", false);
    });
    btn.on('click', function () {
        $td.html(input.val());
        inputDiv.prop("hidden", true);
    });
})();

Answer 2

三十三、JQuery简介+选择器