0

new[ish] .on 構文を使用すると、ユーザーがトリガーするイベントに簡単にバインドできます。例えば：

$(document).on('click', '#my-div', function() {
    alert("You clicked it!");
});

しかし、ユーザーがトリガーしない可能性のあるものへのバインドはどうでしょうか?

$(document).on('somethingaddedtoDOM', '#my-element', function() {
    alert("Nothing");
});

これは、私が話していることをよりよく理解するための jsFiddle です。 http://jsfiddle.net/NedRW/3/

わかりました、ここに同様の問題があります。スライダーを DOM に動的に追加したいとしましょう。この例では sudoSlider です。Mustache.js と Mustache.jquery プラグインを使用してみましょう。

HTML

...
<div id="slider-target-container">
</div>
...

モデルを見る:

var viewModel = [
    {
        image: "path-to-image"
    },
    {
        image: "path-to-image"
    },
    {
        image: "path-to-image"
    }
];

口ひげのテンプレート

<script type="text/html" id="slider-template">
    <div id="slider">
        <ul>
           <li>{{image}}</li>
        </ul>
    </div>
</script>

Javascript

$(document).ready(function() {
    $.Mustache.addFromDom();
    var html = $('#slider-template');
    $('#slider-target-container').appendTo(mustache.render(html, viewModel);
});

ここで、明らかに、新しく作成したスライダー HTML で sudoSlider プラグインを呼び出す必要があります。しかし、私が知る限り、新しい .on() メソッドではそれを行うことはできません

以前は機能していたもの:

$('#slider').live(function() {
    $(this).sudoSlider();
});

しかし今、私が知る限り、新しいアイテムが dom に追加された場合 (そして、追加された場合は特定の識別子を使用して) は方法がないため、まだ存在しない可能性のあるものにプラグインをバインドする方法がありません。これはもっと理にかなっていますか？

4

3 に答える 3

0 
But what about binding to things the user might not trigger?

私はあなたの質問を完全には理解していませんでしたが、私が理解したことに基づいて、以下のように解決策をリストしています:

// add a click handler to an element that doesn't yet exist
$('document').delegate('#contentToBeAdded', 'click', function(e) {
    // do something
    // example use case would be content added using AJAX or from any manipulation user has not triggered.
});

// even handle a custom event for an element
$('document').delegate('#contentToBeAdded', 'custom-event', function(e) {
    // do something and in this case I assume 'somethingAddedToDOM' is a custom event thrown by user
});

それが役に立てば幸い。

編集: 問題の機能が DOM の変更である場合、Mutation イベントをリッスンできます [私たちの永遠の愛 IE の onpropertychange イベント]

于 2013-02-23T21:44:51.243 に答える
0 
$(document).on('click', "#tester", function() {
    alert("Clicked");
    $('<div id="tester-2"></div>').appendTo('body');
    $('#tester-2').css("background", "red");
});
于 2013-02-23T19:46:54.960 に答える
0

.onjquery のライブ ドキュメントでは、適切に置き換える方法について説明して.liveいます。

http://api.jquery.com/live/

上記の例を見ると、次のように思います。

<div id="slider">
    <ul>
       <li>{{image}}</li>
    </ul>
</div>

に追加されます

<div id="slider-target-container"></div>

これにより、同じ id (#slider) を持つ要素が作成されるので、作成してみましょう。

<div class="slider">
    <ul>
       <li>{{image}}</li>
    </ul>
</div>

代わりは。

$(document).on("click", "#slider-target-container .slider", function(){
    alert("Clicked");
});

うまくいけば、あなたが探しているものですか？

特定の新しい要素が dom に追加されるたびに何かをトリガーしたい場合は、カスタム トリガーを使用できます。

http://www.michaelhamrah.com/blog/index.php/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

から

Jqueryを使用して要素がページに追加されたときにアクションを実行する方法は?

.bind.and の両方が上記のよう.liveに置き換えられました.on。

于 2013-02-23T20:49:00.847 に答える