3

のような関数を使用できるかどうか.delegate()、.on()またはのようなjqueryUIイベントをリッスンする方法で使用できるかどうかを知りたいですdraggable。私は次のものを持っています：

HTML：

  <div id="wrapper"></div>​

javaScript：

$(function(){

  var addMe='<div id="draggable" class="ui-widget-content"><p>Drag me around</p></div>'

  $( "#wrapper" ).delegate('#draggable','draggable',function(){
       console.log('its something!');
  });

  //$(".draggable").draggable();
  $("#wrapper").append(addMe) 
})

使用する要素draggableは動的に追加されるので、delegateまたはを使用しますon。

また、.ajaxGETの結果からドラッグ可能なリストアイテムを追加するにはどうすればよいかを知っていることに注意してください。そして、その解決策でさえ私のために働くことができます私は私が求めているものではない.post（）関数を変更する必要があります。

ここに問題があります

4

3 に答える 3

4

これは非常に一般的な質問です....委任を使用してプラグインを呼び出す方法であり、のような聖杯はありませんon()。ほとんどすべてのjQueryUIウィジェットの場合、単にイベントをバインドするよりもはるかに複雑であり、htmlおよび要素データを構築する必要があります。

委任メソッドはありませんが、アプリケーションに適している場合は、$。ajaxComplete（）をグローバルハンドラーとして使用してプラグインを初期化できます。任意の要素にバインドできるため、thisハンドラー内で使用できます

 $('#content').ajaxComplete(function(e, xhr, settings){
     /* url conditional*/
      if (settings.url == 'getMoreDraggables.php') {
            $(this).find('.newDraggable').removeClass('newDraggable').draggable()
      }
      /* element conditional */
     if( $(this).find('.newDraggable').length){  
        /* run code for true*/
     }

});

xhrオブジェクトに基づいて条件を追加することもできます

于 2012-06-28T17:40:38.600 に答える
3

イベント委任を使用してjQueryUIウィジェットを自動的に作成することはできません。最善の策は、明示的に破棄して再作成することです。

$('.draggable').draggable('destroy');
$('.draggable').draggable();

http://jsfiddle.net/hTCLB/を参照してください

于 2012-06-28T17:16:46.860 に答える
2

.draggable()Ajaxリクエストのコールバックでを呼び出す関数を実行することはできませんか？

それ以外の場合は、 DOM Mutation Observerでラッパーを監視し、無名関数を使用して.draggable()、新しい要素が追加されたときに呼び出します。あなたが尋ねたイベント委任と非常に似ていますが、それが古いバージョンのIEにどれほど適しているかはわかりません。

オブザーバーを使用したサンプルコード：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.type === 'childList' && mutation.addedNodes.length) {
            $("#draggable").draggable();
        }
    });
});
observer.observe($('#wrapper')[0], { attributes: false, childList: true, characterData: true });

DOMMutationObserverを使用したJSFiddle

参照

また、これにAjax呼び出しのコールバックを使用できない場合は、アプリケーションにロジック/設計上の欠陥がある可能性があります。DOM Mutation Observerとしてハックを押し下げる前に、それを確認することをお勧めします。

于 2012-06-28T17:25:23.423 に答える