jQuery中live()方法用法实例

live()方法是jQuery中一种用于事件委托的方法，其能够对动态添加的节点绑定事件，使用也很简单。

语法

$(selector).live(event, function)

event参数是要绑定的事件类型，例如click、mouseover等。

用法示例

示例1：给动态添加的按钮绑定点击事件

<button id="btnAdd">添加按钮</button>
<div id="container"></div>

<script>
  // 当页面加载完后，给按钮绑定点击事件
  $(document).ready(function(){
    $('#btnAdd').click(function(){
      // 动态添加按钮
      $('#container').append('<button class="dynamic-btn">动态添加的按钮</button>');
    });

    // 用live()方法对动态添加的按钮绑定点击事件
    $('.dynamic-btn').live('click', function(){
      alert('动态添加的按钮');
    });
  });
</script>

在此示例中，当页面加载完后，给“添加按钮”按钮绑定点击事件。点击此按钮时，动态添加一个名为“动态添加的按钮”的按钮节点，然后使用live()方法对此按钮绑定点击事件。

示例2：给动态添加的表格行绑定点击事件

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

<button id="btnAdd">添加行</button>

<script>
  // 当页面加载完后，给按钮绑定点击事件
  $(document).ready(function(){
    $('#btnAdd').click(function(){
      // 动态添加表格行
      $('#myTable').find('tbody').append('<tr><td>李四</td><td>女</td><td>22</td></tr>');
    });

    // 用live()方法对动态添加的表格行绑定点击事件
    $('#myTable').find('tbody tr').live('click', function(){
      $(this).addClass('selected').siblings().removeClass('selected');
    });
  });
</script>

在此示例中，当页面加载完后，给“添加行”按钮绑定点击事件。点击此按钮时，动态添加一行包含“李四、女、22”的表格行，然后使用live()方法对所有动态添加的表格行绑定点击事件，使其可被选中和取消选中。请注意，此示例要对所有动态添加的表格行都进行添加事件处理，因此使用了find()方法来定位到子元素。