Question

我有一个带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'>" );

这是一个错误还是我在这里缺少什么？

由于

Answer 1

改为：

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

Answer 2

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

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

2 个答案: