3

jQueryの「on」関数は、将来作成される要素のイベントをキャッチすることになっていますが、私のコードでは、アイテムが既に作成されていない限り機能しないようです。失敗するコードは次のとおりです。

<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#div1').on('click', function(e) { 
        $('#div2').html('<div id="div3">Now Click Me!</div>'); 
    });
    $('#div3').on('click', function(e) { alert('OLA!'); });
});
</script>
</head>
<body>
<div id='div1' style='border:black 1px solid; background:yellow'>CLICK ME</div>
<div id='div2' />
</body>
</html>

「div2」をクリックすると「div3」が作成されますが、「div3」をクリックしても何も起こりません。一方、JavaScript コードを次のように変更すると、次のようになります。

$(function () {
    $('#div1').on('click', function(e) { 
          $('#div2').html('<div id="div3">Now Click Me!</div>'); 
          $('#div3').on('click', function(e) { alert('OLA!'); });
    });
});

それは機能しますが、div3要素が追加された後に「div3」のイベントハンドラーが宣言されていないため、機能します。おそらく、「on」がどのように機能するかを誤解していますか？

4

5 に答える 5

3

これを試して...

$('body').on('click', '#div3', function(e) { alert('OLA!'); });

最初のセレクターは、イベントがバブルする共通の祖先要素である必要があります。

于 2012-10-10T02:39:54.650 に答える
3

要素またはドキュメント オブジェクトの静的な親の 1 つからイベントを委任する必要があります。

$('#div2').on('click', '#div3', function(e) {
     alert('OLA!'); 
});
于 2012-10-10T02:40:32.903 に答える
2

このように与える必要があります：

$('#div2').on('click','#div3', function(event) {
  alert('OLA!');
});

フィドル: http://jsfiddle.net/BRWVq/

于 2012-10-10T02:41:25.747 に答える
2

まあ何か違う:) http://jsfiddle.net/VYgpM/1/

それが原因に適合することを願っています:)

コード

$(function() {
    $('#div1').on('click', function(e) {
        $('#div2').html('<div id="div3">Now Click Me!</div>');
        init_div3();
    });

    function init_div3(){
        $('#div3').on('click', function(e) {
        alert('OLA!');
    });
    }
});​
于 2012-10-10T02:41:48.627 に答える
1

これを試して

$('#div2').on('click','#div3', function(e) { 
    alert('OLA!'); 
});

要素を動的に作成しているため、イベントを委任する必要があります..

コードは次のようになります

$(function() {
    $('#div1').on('click', function(e) {
        $('#div2').html('<div id="div3">Now Click Me!</div>');

    });

    $('#div2').on('click', '#div3', function(e) {
        alert('OLA!');
    });
});​

デモをチェック

于 2012-10-10T02:40:35.337 に答える