我的代码:
$('#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');
})
})
<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>这里有 3 个问题:
为什么点击“确定”后2个变量都是空的？
为什么当我们再次点击时，事件执行了2次..和3次...和...
当我单击“修改”时，我该如何进行输入，然后单击“确定”而不是“修改”，然后，当我单击“确定”时，根据具体情况更改值输入中有哪些值，并再次“修改”而不是“确定”？ (并且无限期)
最佳答案
所以你已经掌握了核心，但有一些细节让你绊倒:
- 即使您更改 ID，
#modify和#ok链接其实是一样的<a>DOM 中的标签，因此它最终有两个点击事件监听器。 - 您只是更改
#modify的 ID链接但事件监听器仍然存在。因此，当您单击类似#ok的内容时，原始的单击事件监听器将触发，并用#ok之前的空文本框替换您的文本框。事件单击事件处理程序触发。因此，当您检查文本框的值时，它已被清除。 - 每次单击修改链接时，您都会为
#ok创建一个新的监听器。关联。因此，当您第一次单击“修改”链接时，它会连接一个事件监听器。然后，当您再次执行此操作时，您将获得 2 个事件监听器，然后再次连接第三个事件监听器。
所以您需要做的是为 #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').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>关于jquery - 即使 html 发生变化，如何将 javascript 保留在 DOM 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46977568/