1

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

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

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” 所以它不是隐含的全局变量。

4

0 回答 0