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

（这与jQuery 2.x无关;它在jQuery 1.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');
});
```
通过在click上实际挂钩document事件，然后只有在事件通过匹配#test2的元素时才触发处理程序（并且它用{{调用你的处理程序） 1}}设置为匹配元素，像往常一样）。你不必使用this; document的任何祖先元素都可以使用（包括#test2）。

替换Jquery 2中的on

1 个答案: