Question

我正在尝试使用JQuery构建思维导图工具，我正在努力编辑div内容。

我写了一个函数，允许我向（思想容器）div添加文本。它运作良好。但是，一旦设置完毕，它就不允许我编辑文本。

以下是一个实例：https://jsfiddle.net/TiOw87/c9wwe81d/5/

这是我的JQuery函数：

$('.mind-container').click(function(){
    $('input').addClass('active');
    $('input').parent().find('input').focus();
    $('input').keyup(function(event){
        if(event.keyCode == 13){
            var string = $(this).val();
            $(this).removeClass('active');
                if ($(this).has("p"))
            {
                $(this).parent().html("<p>"+ string +"</p>")
            }
            else
            {
                $(this).parent().append("<p>"+ string +"</p>")
            }
        }   
    })
});

和我的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>

  <div id='board'>
    <div class='mind-container' id='mind-master'>
      <input type="text">
    </div>

  </div>

</body>

我希望能够点击div并能够编辑其中已存在的输入文本的值。

感谢您的帮助

Answer 1

此处的问题是您对has()的使用。 http://api.jquery.com/has/ has()减少匹配的元素集，它不返回布尔值。并且由于jQuery对象总是真实的，逻辑正在执行第一个条件，使用html()用p字符串替换div的整个内容。作为副作用，您的输入框不再与之交互。

将条件更改为has(...).length将解决始终真实的问题，但是通过执行html()删除输入框的潜在问题仍然存在。

注意，在keyup处理程序中执行嵌套绑定会产生另一个问题，这将导致多个绑定。你也应该解决这个问题。

如何使用JQuery单击编辑输入值

1 个答案: