JavaScript / ファイルマネージャーの部分的なロジック

StackOverflow https://stackoverflow.com//questions/9695134

質問

私は基本的に、WordPress の「メディア」セクションの機能と同様の、Rails アプリ用のファイルマネージャーを作成しようとしています。現在、と呼ばれるモデルがあります Asset ここはユーザーがさまざまな画像をアップロードする場所です。他のさまざまなモデルには、単なるテキストフィールドである画像用のフィールドがあります。ユーザーがテキストフィールドをクリックすると、モーダルウィンドウで「アセットマネージャー」が開き、その中に含まれるすべての画像が表示されることを期待しています。 Asset 示しています。ユーザーがいずれかの画像をクリックすると、モーダルが閉じて、選択した画像の URL がテキスト フィールドに入力されます。

というモデルがあります Events これには、私が話していたテキストフィールドが含まれています。の中に new action 私は js に応答し、期待どおりに、すべてのアセットを含むパーシャルをモーダル ウィンドウにロードします。私の唯一の問題は、これを経由して実行していることです $.getScript を呼び出しても、画像の URL をテキストフィールドにロードするための追加の JavaScript を呼び出すことができません。オブジェクトがまだ存在していないためだと思います。とにかく、コードに進みます。

コントローラ

def new
  @event = Event.new
  @asset = Asset.all
end
respond_to do |f|
  f.html
  f.js
end

新しい.js

$('.acontainer').html('<%= render @asset %>');

ページ.js

//when a user clicks the image field, show the asset partial
$('.image-field').click(function() {
    $.getScript('edit.js');
});

// when a user clicks an image, add it's src to the image field <-- does nothing
$('.actonainer img').click(function() {
    $('.image-field').val($(this).attr('src'));
});

特にこれを行うより良い方法を知っている人がいたら、どんなアイデアでも大歓迎です。:-)

役に立ちましたか？

解決

クリックイベントをクリックしても、.Image-Fieldをクリックすると、その時に存在しない。

を取得するので、存在しないような.Acontainer IMG DOM要素にバインドすることができます。

一般的に、 jquery.on を使用して、イベントをドキュメントルートにバインドする必要があります。これは委任と呼ばれます。リンクをクリックすると、イベントが起動してドキュメントノードを押します。イベントを処理します。このようにして、あなたがAjaxを介してDOM要素を追加するとき、またはDOMで直接DOMで、あなたが意図したイベントハンドラを得るでしょう。

$(function() {
  $(document).on('click', '.acontainer img', function(event) {
    $('.image-field').val($(this).attr('src'));
  })
});
.

しかし、ここでは大きな問題があります。ページ上の複数の.image-field要素が複数あるように聞こえます。 .Image-Field Handlerで行う必要があるかもしれないものはJSではなくHTMLを返します。そのため、イベントを新しく追加されたHTMLのルート要素にバインドできます。そのブロックは、画像がクリックされると、その値が設定できる特定の入力フィールドを識別します。

$(function() {
    $(document).on('click', '.image-field',
    function(event) {
        var field = $(this);
        $.ajax('/edit', {
            success: function(data, textStatus, jqXHR) {
                var blah = $(Dialog.new(data));
                // Create a modal and return its root DOM element
                blah.on('click', 'img',
                function(event) {
                    field.val($(this).attr('src'));
                });
            }
        })
    });
});
.

最終的な注意事項、あなたの資産のために安らかなコントローラを使うことを検討することをお勧めします。特に編集アクションを使用して、EventsControllerという名前のコントローラから1つのリソース（アセット）を取得したくない場合があります。 AssetsController :: Indexを取得して、資産のリストを返します。

他のヒント

最初のクエリは次のとおりであるため、画像をクリックしても何も起こりません。 ".acontainer img" は要素を返さないため、イベント ハンドラーは何もアタッチされません。まだロードされていません。

試してみてはいかがでしょうか jQueryの live 方法. 。ページの読み込み時に存在する要素にハンドラーをアタッチします そして 要素は後で DOM に追加されます。

アップデート： @aceofspades が指摘しているように、 live jQuery 1.7 では非推奨になりました。使用 on その代わり。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top