Question

我对这个问题感到有些困惑，我已经有几天了。背景是我已经写了一个包含表格的页面，我希望能够点击表格内容中的文本来编辑它们。我已经写了一些JS（好吧，我使用的是JQuery），但它似乎并没有起作用。我可以让文本更改为输入字段，但很难点击它。更奇怪的是我可以在文本框中输入。

作为使代码更容易的概念证明，我创建了一个测试HTML / JS页面，它正在做同样的事情。

如果有人可以请帮助我查明这个问题会很棒。我必须承认我现在只是在学习JS / JQuery。

提前致谢

韦恩

HTML文件

<html>
  <head>
    <title>Testing Page</title>
  </head>
  <body>
  <p id="test" class="testclick">
    Boo
  </p>
  <script src="jquery-1.11.3.min.js"></script>
  <script src="test.js"></script>
  </body>
</html>

test.js文件

$(document).on('click','.testclick',function(){
  var element_text;
  element_text = '<form name="test_form" method="">';
  element_text += '<input type="text" name="name" placeholder="Boo" value="">';
  element_text += '</form>';
  $('#test').html(element_text);
  console.log(element_text);
})

Answer 1

每次点击输入元素时，该事件bubbles up the DOM tree，最终都会点击父<p>标记。由于该标记仍然具有testclick类，因此您的代码将再次运行，并使用新副本替换表单和输入元素。

最简单的解决方案是在替换内容时删除CSS类：

$(document).on('click','.testclick',function(){
  var element_text;
  element_text = '<form name="test_form" method="">';
  element_text += '<input type="text" name="name" placeholder="Boo" value="">';
  element_text += '</form>';
  $('#test').html(element_text).removeClass('testclick');
  console.log(element_text);
})

jsFiddle

使用FORM替换HTML元素文本，无法单击输入字段

1 个答案: