Javascript 将HTML元素文本替换为表单，无法单击输入字段_Javascript_Jquery

Javascript 将HTML元素文本替换为表单，无法单击输入字段

javascript jquery

Javascript 将HTML元素文本替换为表单，无法单击输入字段,javascript,jquery,Javascript,Jquery,这几天来，我对这个问题感到有点困惑。背景是我写了一个包含表格的页面，我希望能够单击表格内容中的文本来编辑它们。我已经编写了一些JS（我正在使用JQuery），但它似乎不起作用。我可以将文本更改为输入字段，但很难点击它。更奇怪的是，我可以将标签插入文本框为了使代码更简单，我创建了一个测试HTML/JS页面，它也在做同样的事情如果有人能帮我找出这个问题，那就太好了。我必须承认，我现在只是在学习JS/JQuery 提前谢谢韦恩 HTML文件 <html> <head>

这几天来，我对这个问题感到有点困惑。背景是我写了一个包含表格的页面，我希望能够单击表格内容中的文本来编辑它们。我已经编写了一些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>

$(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);
})


测试页

喝倒采

test.js文件

<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>

$(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);
})

$（文档）.on（'click'，'testclick'，function（）{
变量元素\文本；
元素_text=“”；
元素_text+=''；
元素_text+=''；
$（'#test'）.html（元素文本）；
console.log（元素\文本）；
})

每次单击输入元素时，该事件都会发生，并最终命中父标记。由于该标记仍然具有

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);
})

$（文档）.on（'click'，'testclick'，function（）{
变量元素\文本；
元素_text=“”；
元素_text+=''；
元素_text+=''；
$（'#test'）.html（元素文本）.removeClass（'testclick'）；
console.log（元素\文本）；
})

每次单击输入元素时，该事件都会发生，并最终命中父级

标记。由于该标记仍然具有

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);
})

$（文档）.on（'click'，'testclick'，function（）{
变量元素\文本；
元素_text=“”；
元素_text+=''；
元素_text+=''；
$（'#test'）.html（元素文本）.removeClass（'testclick'）；
console.log（元素\文本）；
})

难以置信，如此明显，无法相信我没有树枝。谢谢你难以置信，如此明显，无法相信我没有细枝。非常感谢。