7

このループで、要素を含むいくつかのdivを作成しています。「linky」クラスを持つすべてのリンクにクリックイベントをアタッチできるようにしたいのですが、このリンクはcontentID属性を読み取ります。

私は永遠に検索し、動的に作成された要素でセレクターを使用するケースを見つけましたが、私のケースには適用できません。任意のヒント？

                    for (i = 0; i < msg.length; i++) {
                        var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
                        htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";


                        if (msg[i].IsPaused == true) {

                            htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
                        } else {

                            htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
                        }
                        htmlCode += "</span>";
                        htmlCode += "<div class='clear'></div>";
                        $("#divContent").append(htmlCode);
                    }

答えを与えられて、私はイベントをクラスlinkyにアタッチしようとしていますが、どこにあるのかわかりません。以下の詳細を参照してください。私の指示は、ajax submit（post）の結果から動的要素を作成しています。

                    success: function (msg) {

                        $("body").on("click", "a.linky", function () {
                            alert($(this).attr("contentID"));
                        });



 for (i = 0; i < msg.length; i++) {
                            var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
                            htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";


                            if (msg[i].IsPaused == true) {

                                htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
                            } else {

                                htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
                            }
                            htmlCode += "</span>";
                            htmlCode += "<div class='clear'></div>";
                            $("#divContent").append(htmlCode);
                        }


 }
4

3 に答える 3

15

委任された形式を使用しますon：

$("body").on("click", "a.linky", function() {
    alert($(this).attr("contentID"));
});

動的コンテンツを作成する前に、これを1回だけ実行する必要があります。クリックされているセレクター<body>を満たす子孫のいずれかに応答するイベントハンドラーをアタッチします。a.linkyこれらの要素がハンドラーをアタッチした時点ですでにDOMにあるかどうか、または後で追加されるかどうかは関係ありません。

于 2012-09-29T23:28:58.187 に答える
3

この場合、要素が作成されたらすぐにイベントをバインドする必要があります。しかし、頻繁なバインドとバインド解除は悪いパターンです。

したがって、イベントを委任することになっています。これらのコントロールの親コンテナにイベントをアタッチします。これらのコントロールは、子のイベントをリッスンし、これらが委任されている子にイベントを提供します。

これを試して

$('body').on('click' , 'a.linky', function() {

      alert('Content id is : '+ $(this).attr('contentID'));
});
于 2012-09-29T23:33:59.200 に答える
2

追加した要素を見つけて、そこにイベントハンドラーをアタッチします。

$("#divContent").append(htmlCode)
    .find('.linky')
    .click(function(){
        //your click handler
    });
于 2012-09-29T23:48:14.630 に答える