1

基本的に私の問題は、javascript から (jquery を使用して) 要素を追加すると、追加した要素が Web インスペクターに表示されますが、ブラウザーにはまったく表示されないことです。

私がやろうとしているのは、Google+ が最初に登場したときに好きだったものをシミュレートすることです。これは、ユーザーにアイテムのリストを入力してもらいたいときに、1 つのテキスト フィールドを提供し、ユーザーがそれに何かを追加し始めたら、最初の文字が入力された直後に、新しいテキスト フィールドがその下に表示されます。だから私は私のコードです、私はユーザーに達成したい一連の目標を入力させ、単一のテキストフィールド（またはユーザーが以前に作成したリストを編集している場合は複数）を提供し、最後のテキストフィールドがデータの場合、プログラムによって新しいテキスト フィールドが作成されます。

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