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”的按钮时，我无法获得结果，即警报。

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" />').find("#hh").on('click',function() {
      alert('raman');
    });
  });
});
于 2013-07-27T07:30:04.267 回答
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 回答