Question

我的代码：

＆＃13;

   
    $('#modify').on('click', function(e){
        e.preventDefault();
        var name = $('#name').text();
        var age = $('#age').text();
        $('#name').html("<input id='newName' value='" + name + "'/>");
        $('#age').html("<input id='newAge' value='" + age + "'/>");
        $('#modify').text('OK');
        $('#modify').attr('id', 'ok');
        $('#ok').on('click', function(e){
            e.preventDefault();
            var newName = $('#newName').val();
            var newAge = $('#newAge').val();
            alert($('#newName').val());
            alert($('#newAge').val());
            $('#name').html(newName);
            $('#age').html(newAge);
            $('#ok').text('Modify');
            $('#ok').attr('id', 'modify');
        })
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <p>Test</p>
    
    <p>Name : <div id="name">Stan</div></p>
    <p>Age: <div id="age">20</div></p>
    <p><a href="" id="modify">Modify</a></p>
</html>

＆＃13;

这里有3个问题：

为什么点击＆＃34后确定2个变量; OK＆＃34;是空的吗？
为什么当我们再次点击时，该事件会被执行2次..而且3 ...和......
当我点击＆＃34;修改＆＃34;然后，有一个＆＃34; OK＆＃34;我怎么能做输入？而不是＆＃34;修改＆＃34;然后，当我点击＆＃34; OK＆＃34;，根据输入中的值改变值，并再次进行修改＆＃34;而不是＆＃34;好的＆＃34;？（并且这无限期地）

Answer 1

使用委托来执行基于id的逻辑，就像点击它一样。

var $name = $('#name');
var $newName = $('#newName');
var $age = $('#age');
var $newAge = $('#newAge');
var $button = $('#modify');

$('#container')
  .on('click', '#modify', function(e) {
    e.preventDefault();

    $newName.val($name.text());
    $newAge.val($age.text());

    $name.text('');
    $age.text('');

    $newName.attr('type', 'text');
    $newAge.attr('type', 'text');
    
    $button.text('Ok').attr('id', 'ok');
  })
  .on('click', '#ok', function(e) {
    e.preventDefault();

    $name.text($newName.val());
    $age.text($newAge.val());

    $newName.attr('type', 'hidden');
    $newAge.attr('type', 'hidden');
    
    $button.text('Modify').attr('id', 'modify');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>

<div id="container">
  <p>Name :
    <div><span id="name">Stan</span><input type="hidden" id="newName" value=""></div>
  </p>
  <p>Age:
    <div><span id="age">20</span><input type="hidden" id="newAge" value=""></div>
  </p>
  <p><a href="" id="modify">Modify</a></p>
</div>

Answer 2

为什么点击＆＃34后确定2个变量; OK＆＃34;是空的吗？

#modify事件正在重置它们（因为它与#ok元素的DOM节点相同，您可以交换ID，但之前绑定的事件会保留在那里。）

为什么当我们再次点击时，事件会被执行2次......以及3 ......和......

因为每次再次点击时，都会将新的点击事件绑定到“＃ok＆＃39;”，因此下次单击时，将触发所有绑定事件。

当我点击＆＃34;修改＆＃34;然后，有一个＆＃34; OK＆＃34;我怎么能做输入？而不是＆＃34;修改＆＃34;

只要有可能，您通常希望避免覆盖DOM，因为这会破坏现有元素上的任何绑定，并且通常会使调试更加困难。

在这种情况下，您需要在表单和表单值的显示之间切换 - 因此，不是覆盖相同的DOM节点，而是更容易单独绘制它们并切换显示：

＆＃13;

$('#modify').on('click', function() {
  $('#newName').val($('#name').text());
  $('#newAge').val($('#age').text());
  $('#form').show();
  $('#display').hide();
});

$('#ok').on('click', function() {
  $('#name').html($('#newName').val());
  $('#age').html($('#newAge').val());
  $('#display').show();
  $('#form').hide();
});

＆＃13;

#form {display:none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Test</p>
   
<div id="display">
    <p>Name: <span id="name">Stan</span></p>
    <p>Age: <span id="age">20</span></p>
    <p><button id="modify">Modify</button></p>
</div>
    
<div id="form">
    <p>Name: <input id="newName"></p>
    <p>Age: <input id="newAge"></p>
    <button id="ok">Ok</button>
</div>

＆＃13;

Answer 3

所以你有核心，但有一些细节让你沮丧：

即使您要更改ID，#ok和<a>链接实际上也是DOM中的#modify标记，因此最终会有两个点击事件监听器。
您只是更改了#ok链接的ID，但事件监听器仍在那里。因此，当您单击看起来像#ok的内容时，原始单击事件侦听器将触发，并在#ok事件单击事件处理程序触发之前用空文本框替换文本框。因此，当您检查文本框的值时，它已被清除。
每次单击修改链接时，都会为#ok链接创建一个新的侦听器。因此，当您第一次单击“修改”链接时，它会连接一个事件侦听器。然后，当你再次执行它时，你会得到2个事件监听器，然后再次连接第3个事件。

所以你需要做的是为$('#ok').on('click', function(e){ e.preventDefault(); var newName = $('#newName').val(); var newAge = $('#newAge').val(); alert($('#newName').val()); alert($('#newAge').val()); $('#name').html(newName); $('#age').html(newAge); $('#ok').hide(); $('#modify').show(); }); $('#modify').on('click', function(e){ e.preventDefault(); var name = $('#name').text(); var age = $('#age').text(); $('#name').html("<input id='newName' value='" + name + "'/>"); $('#age').html("<input id='newAge' value='" + age + "'/>"); $('#modify').hide(); $('#ok').show() });链接创建第二个链接并分别连接，只显示和隐藏正确的按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <p>Test</p>
    
    <p>Name : <div id="name">Stan</div></p>
    <p>Age: <div id="age">20</div></p>
    <p>
        <a href="" id="modify">Modify</a>
        <a href="" id="ok" style="display: none;">Ok</a>
    </p>
</html>

{{1}}

即使html发生变化，如何在DOM上保持javascript？

3 个答案: