替换 Jquery 2 中的 on

Question

我正在使用 Jquery 2.0.2，但由于某些原因 "on" 似乎无法处理 jquery 添加的元素。下面是第二部分不起作用的示例

  <button class="btn btn-danger btn-lg" id="hi">Danger</button>
            <div id="edit-form">
            </div>



    <!-- jQuery 2.0.2 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<script type="text/javascript">
    $('#test1').on('click',function(){
       $('#edit-form').html('<button class="btn btn-info btn-lg" id="test2">Info</button>');
    })
     //this part doesn't work \/
    $('#test2').on('click',function(){
      alert('test');
    })
    </script>

Answer 1

(这个和jQuery2.x没有关系，jQuery1.x也是一样)

当您运行您的代码时，您使用它的方式只会将事件挂接到存在的元素上。因为 #test2 没有，所以它不会被钩住。

您有两个选择：

添加后挂钩

$('#test1').on('click',function(){ $('#edit-form').html('<button class="btn btn-info btn-lg" id="test2">Info</button>'); $('#test2').on('click',function(){ alert('test'); }) })

使用事件委托：

$('#test1').on('click',function(){ $('#edit-form').html('<button class="btn btn-info btn-lg" id="test2">Info</button>'); }) $(document).on("click", "#test2", function() { alert('test'); });

它的工作原理是在 document 上实际挂钩 click 事件，但仅当事件通过与 #test2 匹配的元素时才触发您的处理程序（并且它调用您的处理程序this 设置为那个匹配的元素，像往常一样）。你不必使用 document; #test2 的任何祖先元素都可以（包括 #edit-form）。

替换 Jquery 2 中的 on

replacement for on in Jquery 2

jquery