Question

我想隐藏身体附加的div。我正在使用.on和jQuery 1.9.1，但它无法正常工作。

<head>
    <style>
        .brd { border:solid 1px #FF0000; background:#CCCCCC}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        function appendHtml (msg) {
            var htm= '<div class="brd">"' + msg + '"  <a href="javascript:void(0)">close</a></div>';
            $('body').append(htm);
        };
        $(function () {
            $('a').on('click', function () {
                $('.brd').remove();
            });
        });
    </script>
</head>
<body>
    <span onmouseover="appendHtml('hiii there')">append html</span>
</body>

Answer 1

您需要将on放在document中已存在的元素上。在您的情况下，a是动态创建的。因此，on无效。

选择要在其上触发事件的元素的最近父元素。

根据您的情况body或document

$(document).on('click','a',function(){
  $('.brd').remove();
})

Answer 2

您需要为动态元素使用委托：

$(function(){
    $(document).on('click','a',function(){
       $('.brd').remove();
    })
})

Answer 3

尝试这种语法

 $(document).on('click','a',function(){
       $('.brd').remove();
    })

Answer 4

在div.brd a的上升DOM元素上使用事件委托：

$('body').on('click','div.brd a',function(){
     $(this).parent().remove();
})

因为关闭按钮是div.brd孩子，您可以使用$(this).parent().remove()代替更快的性能

.on不使用1.9.1 jquery版本

4 个答案: