0

いくつかの要素に変更を適用するJavaScriptと、そのような要素をさらにロードする関数があります。そのように：

<ol id="test"><li>click</li></ol>
<script type="text/javascript">
    $(function() {
        $('OL').delegate("li","click",function(){
        $('#test').append('<li>click</li>');
    });
</script>

これはデリゲートの基本機能であり、機能します。複数の<li>要素をクリックできます。

問題は、私がしたいことです、さらに次のことをします：

$(function() {
    $('li').css('color','red'); 
    //this is just an example, I don't need to paint the text red :)
});

liページの読み込み時に読み込まれるものだけでなく、すべての場合。

これらの変更を何にも添付できませんでした（上記の付録の要素をロードしたことを示すイベントはありません）。$('li').css('color','red');また、appendを呼び出すたびに（または実際に作業しているajaxコールバックで）思い出すことができることも知っています。しかし、私には、さまざまなHTMLを返す多くのajax呼び出しと、この要素に対して実行する必要のある多くのプラグインとjqueryスタッフを備えたシステムがあります。私は、ajaxが成功するたびに呼び出される巨大な「更新」機能を実行したくありません。

今のところ私が見つけた唯一の解決策は、すべてを任意のイベントにバインドし、次のようなすべてのajaxロードでそのイベントのトリガー呼び出しを実行することです。

<ol id="test"><li>click</li></ol>
<script type="text/javascript">
    $(function() {
        $('OL').delegate("li","click",function(){
            $('#test').append('<li>click</li>');
            $('#test').children().trigger('load');
        });
</script>       
<script type="text/javascript">
    $(function() {
        $('OL').delegate("li","load",function(){
            $(this).css('color','red');
        });
    });
</script>

これは、最初にロードされたすべての要素に対して機能します。したがって、追加のコードが必要になりますが、機能します。

誰かがより良い解決策を持っていますか？非イベントの「ライブ」を行う方法はありますか？

ありがとう！

編集 コードの「赤」の例に関して...私が行う必要のある変更は、他の多くのものの中でも特に次のとおりです。

('BODY').delegate(".mcs_container","load",function(){
        $(this).mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","no","no",0);
    }).trigger('load');

したがって、関数をトリガーするだけで機能すると思います。

編集2 ここで実用的な例を作成しました：http： //jsfiddle.net/THHNS/5/ 私が達成しようとしているのは、余分なトリガーを回避できるようにすることです$('LI').trigger('focus');

編集3ON で十分で、より良いはずのときにデリゲートを使用していました。更新された例：http： //jsfiddle.net/THHNS/26/

4

4 に答える 4

0

クラスを定義するのは良いことではありませんか？

.myredclass {color: red;}

そして、LIの作成に追加します。

$('#test').append('<li class=\"myredclass\">click</li>');

私はそれがはるかに速いだろうに違いない。

明らかに、それはcssスタイリングがどれほど動的でなければならないかに依存します（LIごとに異なるxオフセットを設定したい場合、それは実行可能な解決策ではありませんが、単純で一貫性のあるスタイリングの場合はこのようにすることができます）。

于 2012-06-25T08:46:27.920 に答える
0

これですべてのジレンマが解決されるわけではありませんが、カスタムイベントを作成すると、同じチェーンですぐにトリガーして、ページの読み込み時にアクティブになり、ajaxの成功ですぐに使用できるプラグインの簡単なセットアップを行うことができます。

   $('OL').delegate("li","load",function(){
        $(this).css('color','red');
    }).trigger('load');
于 2012-06-25T09:39:49.820 に答える
0

あなたはこれを行うことができます：

<head>
    <script type="text/javascript">
        $(function() {
            $(document).on("click","li", function(){
                $('#test li:first-child').clone().appendTo('#test');
            });
        });
    </script>
</head>
<body>
<ol id="test"><li style="color:red">click</li></ol>
</body>
于 2012-06-25T11:22:45.787 に答える
0

さて、イベントではないものにライブ関数呼び出しを行うことはできないようです。私が見つけた最善の解決策は次のとおりです。

<head>
<script type="text/javascript">
    $(function() {
        $(document).on("click","li", function(){
            //this click simulates an ajax call
            //the html appendend is generated and can have a lot of elements that need javascript work

            //this simmulates the html append
            $('#test').append('<li>click</li>');

            //in my proposed solution the function that attachs the HTML will recur all children of the attached element and trigger a custom event
            $('#test').children().trigger("myLoaded");
        });

        //all jquery functions that usually are called like:
        //$('LI').css('color','red');
        //are called inside the focus event
        //this functions could be anywhere and I don't need to know them prior to the ajax load        
        $(document).on("myLoaded","li", function(){             
            $(this).css('color','red');
        }); //(note 1)

        //Trigger the custom event once to paint red the first element
        $('LI').trigger('myLoaded'); //(note 2)
    });
</script>
</head>
<body>
<ol id="test"><li>click</li></ol>
</body>

ここで試すことができます。

http://jsfiddle.net/THHNS/33/

@charlietflは、（注2）のトリガーを（注1）の宣言にチェーンすることを提案しましたが、私はそれを機能させることができませんでした。とにかく少ない行でそれができると確信しています。しかし、このソリューションは、私が作業している1ページの完全なajaxロードプロジェクトにコードを整理するのに十分だと思います。

ありがとうございます！

于 2012-06-25T11:49:43.637 に答える