2

innerHTML からコンテンツが動的に生成される div があり、検証のために jQuery を使用してこれらの要素をターゲットにすることはできません。たとえば、これはページです。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
</head>
<body>
<span id="alert1">Alert1</span>
<input type="button" value="Click Me" id="button1" />
<div id="empty"></div>
</body>
</html>

これはjsコードです：

<script type = "text/javascript"> 
    $(document).ready(function() {
         $('#button1').click(function() {
             var html = "uname <input type='text' id='uname'><br />password <input type='text' id='password'><br /><span id='alert'>Alert</span>";
             $('#empty').html(html);
         });
         $('#alert').click(function() {
             alert('Alert');
         });
         $('#alert1').click(function() {
             alert('Alert1');
         });
    });
</script>​

ID alert1 のスパンのアラートは機能しますが、innerHTML または .html() を使用して設定された ID アラートは機能しません。これを修正するにはどうすればよいですか?

よろしくお願いします</p>

4

5 に答える 5

3

ここでの問題は、このように書くと..

    $("#element").click(function() {
        alert("Alert!");
    });

.. コードの実行時に存在する要素のイベント ハンドラーのみが作成されます。同じ jQuery セレクター (この場合は "#element") がある場合でも、将来の要素のイベント ハンドラーは作成されません。

.on(event, selector, function)イベントが階層を「バブルアップ」するので、親要素にバインドする必要があります。そうすれば、指定したセレクターから将来のイベントを処理できます。個人的には、次のようにします。

$(document).ready(function() {
     $('#button1').click(function() {
         var html = "<insert lots of html stuff here>";
         $('#empty').html(html);
    });

    $(document).on("click", "#alert", function() {
        alert("Alert!");
    });

    $(document).on("click", "#alert1", function() {
        alert("Alert1!");
    });
});​
于 2012-07-30T07:10:48.823 に答える
1

デリゲートを使用する必要があります

$(elements).delegate(selector, events, data, handler);

あなたのコードに従って

$(document).ready(function() {
  $("yourdiv").delegate("#alert, #button, #Alert1", "click", function() {
    alert('Alert');
  });
});
于 2012-07-30T07:14:33.080 に答える
0

イベント委任を使用してクリック ハンドラーをバインドし、これに使用.on()します

     $('#empty').on('click', '#alert1', function() {
         alert('Alert1');
     });

または、コンテンツを作成した後にハンドラーをバインドすることもできます。

于 2012-07-30T07:08:30.260 に答える
0

実行時にイベントをバインドする.on()代わりに使用します。.click()試すこと.live()はできますが、非推奨です。

これがフィドルです：http://jsfiddle.net/Akyrk/

于 2012-07-30T07:05:22.530 に答える
0

オブジェクトをDOMに追加した後、リスナーをアタッチする必要があります。

その後.html(...)

<script type = "text/javascript"> 
$(document).ready(function() {
     $('#button1').click(function() {
         var html = "uname <input type='text' id='uname'><br />password <input type='text' id='password'><br /><span id='alert'>Alert</span>";
         $('#empty').html(html);
         $('#alert').click(function() {
             alert('Alert');
         });
     });

});

</p>

.on()もオプションです。リスナーがdomにレンダリングされるかどうかに関係なく、リスナーをバインドします。しかし、私は最初のアプローチをお勧めします。大規模なアプリケーションを作成している場合、作成後にハンドラーをアタッチするアプローチは、おそらく気付かないうちにイベント デリゲートが自動的にイベント ハンドラーをアタッチするよりもはるかに明確です。1つまたは2つの場合は問題ありませんが、複数のイベントを複数のオブジェクト（タグ、クラス）に追加している場合、見落としが生じる可能性があります...

于 2012-07-30T07:06:26.713 に答える