1

データベースからレンダリングされたページに複数のリンクがあります。それらすべてに同じIDを指定し、そのIDから取得するJQueryクリック関数を作成しました。アラートを呼び出す簡単なテストを実行しようとしていますが、機能しません。うまくいくと思いませんか？より良いアプローチはありますか？

$("#lkResumeIt").click(function () {
    alert("resume it");
});

<a id='lkResumeIt' href='#' contentID='1'>Item 1</a>
<a id='lkResumeIt' href='#' contentID='18'>Item 2</a>
<a id='lkResumeIt' href='#' contentID='22'>Item 3</a>
...

以下のクラスセレクターを使用したコードは、要素が静的な場合は正常に機能しましたが、動的な場合は機能しません。以下の実際のコードを参照してください。

<script language="javascript">

$("#divContent").on('click', 'a.linky', function (event) {
    alert("resume it");
});




            function RunIt() {
                $("#divContent").html("");
                var jsongo = '';
                $.ajax({
                    type: 'POST',
                    url: '/Controller/FollowingPaused/',
                    data: jsongo,
                    success: function (msg) {
                        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='/Controller/Resume/" + msg[i].ID + "'>Resume</a>";
                                htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
                            } else {
                                //htmlCode += "<a href='/Controller/Pause/" + msg[i].ID + "'>Pause</a>";
                                htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
                            }
                            htmlCode += "</span>";
                            htmlCode += "<div class='clear'></div>";
                            $("#divContent").append(htmlCode);
                        }
                    }
                });
            }


RunIt() 

</script>



        <div style="display: table-row;">
            <div id="divContent" style="display: table-cell; line-height: 1.5;">
            </div>
        </div>
4

2 に答える 2

11

IDを複製することはできません。jQueryに1つのフックが必要な場合はclass、複製できるを使用します。

例：

HTML：

<a href="#bar" class="linky">Foo</a>

JavaScript：

$("a.linky").on('click', function (event) {
    alert("resume it");
});

動的に作成された要素の場合：

$("#your-static-wrapper-element").on('click', 'a.linky', function (event) {
    alert("resume it");
});
于 2012-09-29T17:03:39.960 に答える
4

次の理由により、同じIDを2回使用することはできません。

コードはW3Cによって検証されません。つまり、ブラウザー間でのWebサイトの互換性に問題が生じる可能性があります。1つのブラウザで正常に動作し、他のブラウザでは正常に動作しません。

使用できます

    <div class="main"></div>
    <div class="main"></div>
$(".main").click(function(){
$(this).something..
})
于 2012-09-29T17:29:32.937 に答える