0

私はいくつかの入力を持つ派手なjQueryアラートボックスを作成するこのコードを持っています：

//jConfirm( message, [title, callback] )
    $('#buttonNew').click(function(){
             jConfirm('<form><input id="postTitle" type="text"/><br/><textarea id="postBody"></textarea></form>', 'New Post',
             function(r){if(r==true){
                    alert($('#postTitle').val()); //Expecting the input value but getting "undefined"
                                  }
                         });
                         })

入力に入力された値を使用しようとすると（上記のようにテスト用のalert（）を使用するなど）、「未定義」になります。コールバック関数内から挿入されたHTML入力のこれらの値にアクセスするにはどうすればよいですか？

4

1 に答える 1

1

投稿したコードは構文的に正しいようであり、コールバックの条件ステートメントは明らかにtrueとして処理されています（したがってアラート）。これは、要素の値を取得できないことを意味している必要があります。

これは、ドキュメント（DOM）の準備ができたときにjQueryが初期化されているため、注入されたHTMLはその時点では実際には存在せず、後でDOMに注入されるためです。動的に。

そのようなHTMLフォームを利用するjConfirmの例は見つからないようです。だから私は手足に出かけて、これが問題だと思います。

この問題については、jQueryのWebサイトで非常に良い議論があります。基本的に、DOMをリロードして、jQueryが処理しているすべての要素を認識できるようにする必要があります。HTMLをページに動的に埋め込む場合にも問題が発生する可能性があります。イベントハンドラーが関係する場合は、$。live（）を使用できます（ここで説明します）が、そのような要素の値へのアクセスははるかに複雑な問題のようです。

これが事実である場合、簡単な小さな回避策はこのようなことをすることです...

var title; //in global scope.. yucky!

/* set a -live- event listener to fire whenever 
** postTitle is modified; dumping the value in to
** our global var */
$('#postTitle').live('change',function(r){
    title = $(this).val();
});

/* then just access the 'title' var */

これは、DOMにいつ挿入されたかに関係なく、「postTitle」のIDを持つ要素にアタッチされるイベントリスナーを持っているだけです。'postTitle'が変更されるたびに、このイベントリスナーが呼び出され、新しい値がグローバル変数にダンプされます。つまり、スコープ内のどこからでもアクセスできるようにするため、コードベース全体にアクセスできます。（私は通常、グローバル変数を推奨しませんが、この場合、それは概念実証/トラブルシューティングのステップです;））

ただし、これは問題ではない可能性があるため、開発者コンソールから値にアクセスできるかどうかを確認してください。（firebugなど）次に、さまざまなブラウザをチェックして、それが普遍的な動作であるかどうかを確認してください。しかし、最も可能性の高い問題はDOMになると思います。その場合、グローバル変数を使用せずに回避する多くの方法を考えることはできません。（まあ、簡単な方法はありません）

于 2012-07-25T23:25:10.270 に答える