使用.html(）添加文本输入时出现意外行为

unexpected behavior when adding a text input with .html()

本文关键字：意外 输入 html 添加 文本 使用      更新时间：2023-09-26

我有一个带有div的页面，如果点击它，就会出现一个文本输入框。

这里有一个最小代码：

<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head> 
<body>
<div id="d1">a</div>
</body>
</html>
<script type="text/javascript">
$(document).ready( function(){
    $( document ).on( "click", "#d1", function( e ){
            $( this ).html( "<input type='text'>" );
    } );       
} );
</script>

问题是，尽管出现了文本输入框，但没有显示任何字符。

但是，如果我使用：

$( this ).replaceWith( "<input type='text'>" );

它按预期工作。

此外，如果我将html添加到另一个元素（例如），它也可以正常工作

$("#some_other_element").html( "<input type='text'>" );

这是个bug还是我遗漏了什么？

感谢

更改为：

$( this ).html("<input type='text' value='"+$(this).text().trim()+"'>");


$(document).ready( function(){
    $( document ).on( "click.yourEventName", "#d1", function( e ){
            var $this = $(this);
            var text = $this.text();
            $this.html( $("<input>", {type: "text"}).val(text) );                      
            $(document).off(".yourEventName");
    } );
  
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head> 
<body>
<div id="d1">a</div>
</body>
</html>

相关文章：