Question

基本上我的问题是，当我从javascript中添加一个元素（使用jquery）时，我添加的元素会显示在Web检查器中，但根本不会显示在浏览器中。

我想要做的是模拟我最喜欢谷歌+的东西，当你想要用户输入项目列表时，你为他们提供一个文本字段，一旦他们开始添加然后在第一个字符键入新文本字段后立即显示该文本字段。所以我是我的代码，我让用户输入他们想要实现的一系列目标，我为他们提供单个文本字段（如果用户正在编辑他们之前制作的列表，则为多个），并且一旦最后一个文本字段具有数据然后它将以编程方式创建一个新的文本字段。

HTML：

<div class="field-group clickToAddGroup">
  <label>Goals: </label>
  <div class="input">
    <input type="text" name="goals" value="Goal1">
    <input type="text" name="goals" value="Goal2">
    <input type="text" name="goals" value="Goal3">
    <input type="text" name="goals" value="Goal4">
    <input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
  </div>
</div>

使用Javascript：

$(".clickToAdd").live('keyup',function(){
    console.log("key up triggered");
    if( $(this).val() != '' )
    {
        console.log("cloning in process");

        var theClone = $(this).clone().val('');    // Set the new element to null
        theClone.appendTo( $(this).parent() ); // Clone Parent
        $(this).removeClass('clickToAdd');     // Remove the click to add class

        console.log("clone complete");
    }
    console.log("key up finished");
    console.log("----");
});

$('.clickToAddGroup input').live('blur', function(){
    if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
        $(this).remove();
});

现在上面的代码实际上有效，但是当我点击（或标签到）最后一个文本字段（具有clickToAdd类的字段）并开始输入时首次加载页面时，我在Web检查器中看到javascript已运行正确并创建了新的字段并将其放在应该的位置，但我实际上并没有在屏幕上看到它。但是，当我拍摄我刚刚在文本字段中写入的内容时，将其删除，然后失去焦点（触发“模糊”）文本字段将被删除，然后我可以看到显示的文本字段。从这一点开始，当我将内容添加到最后一个字段（一个使用clickToAdd类）时，它100％完美地工作，它添加了元素，并通过Web检查器显示在屏幕上。

编辑：我将代码复制到jsfiddle（包括我正在使用的css）并在那里尝试它，它恰好按预期工作，没有我遇到的问题。 http://jsfiddle.net/qz2QK/2/

编辑2：在“var theClone = $（this）.clone（）。val（''）;”行中添加“var”所以它不是隐含的全局变量。

元素已添加到DOM但未显示在屏幕上

0 个答案: