Question

我发布的程序，我正在使用添加按钮添加更多按钮。但是当我点击添加了按钮值的按钮时，没有发生任何事件。

<?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而不是我无法获得结果，即警报。

Answer 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.

Answer 2

您需要在此处使用事件委派，但请确保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');
    });
});

演示：Fiddle

Answer 3

问题是，当您尝试向其添加单击处理程序时，您的元素不存在。只需在$('#hh').on('click'...的匿名函数中移动$('.input').click。

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

Answer 4

您也可以使用链接方法

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

Answer 5

你应该使用这个

  $(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/

如何在动态添加的html按钮上获取事件

5 个答案: