0

私が投稿しているプログラムは、追加ボタンを使用してさらにボタンを追加しています。しかし、追加されたボタンをクリックすると値が削除され、イベントは発生しません。

<?php
?>

<html>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('.input').click(function()
            {
                $("p").prepend('<input type="button" id="hh" value="remmove" />');
            });

            $('#hh').on('click',function()
            {
               alert('raman');
            });
        });


    </script>
</head>
<body>
<p>
    <input type="button" class="input" value="add"/>

</p>
</body>
</html>

このコードの何が問題なのか教えてください。ID 'hh' のボタンをクリックすると、remmove という値が表示されますが、アラートなどの結果を取得できません。

4

5 に答える 5

1

動的に追加される要素の親にイベントを委任する必要があります。

$(document).on('click', '#hh',function()
{
    alert('raman');
});

委任されたイベント have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

于 2013-07-27T07:27:08.533 に答える
1

ここではイベント委任を使用する必要がありますがid、ドキュメント内で一意のままであることを確認してください。

        $(document).on('click','#hh',function()
        {
           alert('raman');
        })

複数のボタンを追加する予定がある場合は、id の代わりにクラスを使用してください

$(document).ready(function() {
    $('.input').click(function() {
        $("p").prepend('<input type="button" class="hh" value="remmove" />');
    });

    $(document).on('click', '.hh', function() {
        alert('raman');
    });
});

デモ:フィドル

于 2013-07-27T07:27:20.247 に答える
0

問題は、クリック ハンドラーを追加しようとした時点で要素が存在しないことです。$('#hh').on('click'...の無名関数内に移動するだけです$('.input').click。

        $('.input').click(function()
        {
            $("p").prepend('<input type="button" id="hh" value="remmove" />');
            $('#hh').on('click',function()
            {
               alert('raman');
            });
        });
于 2013-07-27T07:27:05.473 に答える
0

あなたはこれを使うべきです

  $(document).ready(function () {
      $('.input').click(function () {
          $("p").prepend('<input type="button" id="hh" value="remmove" />');
      });
      $(document).on('click', "#hh", function () {
          alert('raman');
      });

  });

http://jsfiddle.net/AZdEy/

于 2013-07-27T07:32:41.967 に答える
0

連鎖法も使える 

$(document).ready(function() {
  $('.input').click(function() {
    $("p").prepend('<input type="button" id="hh" value="remmove" />').find("#hh").on('click',function() {
      alert('raman');
    });
  });
});
于 2013-07-27T07:30:04.267 に答える