.on 不适用于 1.9.1 jquery 版本答案

【问题标题】：.on not working with 1.9.1 jquery version.on 不适用于 1.9.1 jquery 版本
【发布时间】：2013-06-06 10:07:58
【问题描述】：

我想从正文中隐藏附加的 div。我在 jQuery 1.9.1 中使用 .on，但它不起作用。

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

【问题讨论】：

标签： jquery event-delegation

【解决方案1】：

您需要将on 放在document 中已经存在的元素上。在您的情况下，a 是动态创建的。所以，on 不起作用。

选择元素的最近父元素，您希望在其上触发事件。

在你的情况下 body 或 document

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个语法

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

【讨论】：

【解决方案4】：

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

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

由于关闭按钮是 div.brd 子元素，您可以使用 $(this).parent().remove() 来获得更快的性能

【讨论】：