-1

#createbook をクリックしてフォームを表示し、続いて AJAX 経由でフォームを送信しようとしています。テスト目的で、#addme をクリックしたときに hello world に警告しようとしていますが、機能していません。しかし、ブラウザでオンクリック機能を入力すると機能します。これを理解するのを手伝ってくれませんか。ありがとうございました。:)

<div id="mode" style="display:none">

</div>

<script>
    $("#createbook").click(function () {
        $.get("BooksLibrary/Create #create", function (data) {
            $("#mode").html(data + '<button class="btn btn-primary" id="addme">Add Book</button>');
        });
        $("#mode").dialog({
            modal: true,
            title:'Add Book'
        });
        $("#mode").css({ "display": "block" });
    });


    $("#addme").click(function () {
        alert("hello world");
    });
</script>
4

1 に答える 1

2

#addme要素は動的に追加される (イベントの作成時には存在clickしない) ため、イベントの作成時に存在する要素にイベントを委任する必要があります。jQuery のon()メソッドを使用して、これを行うことができます。

$('#mode').on('click', '#addme', function() {
    alert("hello world");
});

jQuery の Web サイトには、 Understanding Event Delegationという素晴らしいセクションがあります。最初の段落では、これが何であるかを、できれば理解しやすい方法で説明しています。

イベント委任により、単一のイベント リスナーを親要素にアタッチできます。これは、セレクターに一致するすべての子孫に対して発火します。それらの子孫が現在存在するか、将来追加されるかは関係ありません。

于 2014-10-10T14:36:14.390 に答える