86

<select>要素を動的に作成し、それを jQuery に変換できる必要があります.combobox()。これは、単に jQuery を使用できる「クリック」イベントとは対照的に、要素作成イベントである必要があります.on()。

では、このようなものは存在しますか？

$(document).on("create", "select", function() {
    $(this).combobox();
}

livequery は非常に時代遅れなので、あまり使いたくありません。

UPDATE上記の選択/コンボボックスは、ajax を介して jQuery カラーボックス (モーダル ウィンドウ) に読み込まれるため、問題 - colorbox を使用してのみコンボボックスを開始できますonCompleteが、1 つのコンボボックスを変更すると、別の選択/コンボボックスを動的に作成する必要があるため、要素の作成を検出するより一般的な方法 (selectこの場合)。

更新2問題をさらに説明するために-select/combobox要素を再帰的に作成し、内部にも多くの開始コードがあるため、 @bipenの回答の.combobox()ように古典的なアプローチを使用すると、私のコードは非常識なレベルに膨らみます。これで問題がよりよく説明されることを願っています。

更新 3DOMNodeInsertedありがとうございました。廃止されたため、DOM の変更に空白が残っており、この問題の解決策がないことがわかりました。申請書を再考するしかありません。

4

12 に答える 12

62

コードによってドキュメントに追加されたときのイベントを取得するイベントをon使用できます。DOMNodeInserted

$('body').on('DOMNodeInserted', 'select', function () {
      //$(this).combobox();
});

$('<select>').appendTo('body');
$('<select>').appendTo('body');

ここをいじった：http://jsfiddle.net/Codesleuth/qLAB2/3/

編集：周りを読んだ後、DOMNodeInsertedブラウザー間で問題が発生しないことを再確認する必要があります。This question from 2010 は、IE がイベントをサポートしていないことを示唆しているため、可能であればテストしてください。

こちらをご覧ください: [リンク] 警告! DOMNodeInserted イベント タイプは、参照と完全性のためにこの仕様で定義されていますが、この仕様では、このイベント タイプの使用を推奨していません。

于 2013-03-07T10:38:23.053 に答える
22

ミューテーション イベントを使用できますDOMNodeInserted(委任は必要ありません)。

$('body').on('DOMNodeInserted', function(e) {
    var target = e.target; //inserted element;
});

編集:ミューテーション イベントは非推奨です。代わりにミューテーションオブザーバーを使用してください

于 2013-03-07T11:23:16.777 に答える
10

私のすべてのajaxの問題を解決すると思われるこのソリューションを思いついたところです。

準備が整ったイベントでは、これを使用します。

function loaded(selector, callback){
    //trigger after page load.
    $(function () {
        callback($(selector));
    });
    //trigger after page update eg ajax event or jquery insert.
    $(document).on('DOMNodeInserted', selector, function () {
        callback($(this));
    });
}

loaded('.foo', function(el){
    //some action
    el.css('background', 'black');
});

そして、通常のトリガーイベントでは、これを使用します:

$(document).on('click', '.foo', function () {
    //some action
    $(this).css('background', 'pink');
});
于 2015-04-08T12:16:07.370 に答える
4

(Firefox と Chrome でのみテストされていますが) 信頼できると思われる1 つの方法は、JavaScript を使用してanimationend(またはその camelCased およびプレフィックス付きの sibling animationEnd) イベントをリッスンし、短命 (デモでは 0.01 秒) のアニメーションを適用することです。追加する予定の要素タイプ。もちろん、これはイベントではありませんが、 (準拠ブラウザでは)イベントのタイプにonCreate近似しています。以下は概念実証です。onInsertion

$(document).on('webkitAnimationEnd animationend MSAnimationEnd oanimationend', function(e){
    var eTarget = e.target;
    console.log(eTarget.tagName.toLowerCase() + ' added to ' + eTarget.parentNode.tagName.toLowerCase());
    $(eTarget).draggable(); // or whatever other method you'd prefer
});

次の HTML を使用します。

<div class="wrapper">
    <button class="add">add a div element</button>
</div>

および (以下の Fiddle には存在しますが、短縮された prefixed-versions-removed) CSS:

/* vendor-prefixed alternatives removed for brevity */
@keyframes added {
    0% {
        color: #fff;
    }
}

div {
    color: #000;
    /* vendor-prefixed properties removed for brevity */
    animation: added 0.01s linear;
    animation-iteration-count: 1;
}

JS フィドルのデモ。

明らかに、CSS は、関連する要素の配置や、jQuery で使用されるセレクターに合わせて調整できます (実際には、可能な限り挿入ポイントに近づける必要があります)。

イベント名のドキュメント:

Mozilla   |  animationend
Microsoft |  MSAnimationEnd
Opera     |  oanimationend
Webkit    |  webkitAnimationEnd
W3C       |  animationend

参考文献:

于 2013-03-07T12:14:36.793 に答える
4

これは可能ですがDOM4 MutationObservers、Firefox 14+/Chrome 18+ (今のところ) でのみ機能します。

しかし、IE10、Firefox 5+、Chrome 3+、Opera 12、Android 2.0+、Safari 4+ の CSS3 アニメーションをサポートするすべてのブラウザーで動作する「壮大なハック」(著者の言葉は私のものではありません!) があります。ブログからデモを参照してください。ハックは、JavaScript で監視および処理される特定の名前の CSS3 アニメーション イベントを使用することです。

于 2013-03-07T11:26:12.647 に答える
4

私にとって、体へのバインディングは機能しません。jQuery.bind() を使用してドキュメントにバインドします。

$(document).bind('DOMNodeInserted',function(e){
             var target = e.target;
         });
于 2014-07-22T00:46:16.013 に答える
0

<select>id で を作成し、ドキュメントに追加して.. を呼び出します.combobox

  var dynamicScript='<select id="selectid"><option value="1">...</option>.....</select>'
  $('body').append(dynamicScript); //append this to the place your wanted.
  $('#selectid').combobox();  //get the id and add .combobox();

これでうまくいくはずです..必要に応じて選択を非表示にし、表示した後に.combobox..または検索を使用できます..

 $(document).find('select').combobox() //though this is not good performancewise
于 2013-03-07T10:35:49.167 に答える
-1

angularjs を使用している場合は、独自のディレクティブを作成できます。私はbootstrapSwitchで同じ問題を抱えていました。JavaScriptを呼び出す必要が $("[name='my-checkbox']").bootstrapSwitch(); ありますが、その時点で HTML 入力オブジェクトが作成されませんでした。だから私は独自のディレクティブを書き、入力要素を作成します <input type="checkbox" checkbox-switch>

ディレクティブでは、要素をコンパイルして、javascript を介してアクセスし、jquery コマンド (.combobox()コマンドなど) を実行します。非常に重要なのは、属性を削除することです。それ以外の場合、このディレクティブはそれ自体を呼び出し、ループを構築します

app.directive("checkboxSwitch", function($compile) {
return {
    link: function($scope, element) {
        var input = element[0];
        input.removeAttribute("checkbox-switch");
        var inputCompiled = $compile(input)($scope.$parent);
        inputCompiled.bootstrapSwitch();
    }
}
});
于 2015-08-05T09:10:45.703 に答える