Question

我有一个按钮，并使用jquery来更改其ID和类。

$("#button_a").on('click', function(){  

    $(this).removeAttr('id');
    $(this).removeClass('left btn btn-warning');        

    $(this).attr('id', 'button_b');
    $(this).addClass('left btn btn-success');

    $(this).text('SAVE');   

});

$("#button_b").on('click', function(){  

    alert('test');

});

当我尝试在$('#button_b') click事件之外访问$('#button_a')时，它不起作用。

如何在$('#button_a')点击事件之外激活它？

Answer 1

#button_b在页面加载时不存在-这样的元素仅在单击#button_a后才存在。因此，您的$("#button_b").on（页面加载时试图将处理程序分配给#button_b）失败了，因为它尚不存在。

您可以改用事件委托。另外，请确保删除（重命名的）button_a上的现有侦听器，并调用stopPropagation，以使冒泡事件（更改ID后）不会触发委托事件：

$("#button_a").on('click', function(e){
  $("#button_a").off('click');
    e.stopPropagation();
    $(this).attr('id', 'button_b');
    $(this).text('SAVE');   
});
$(document).on('click', '#button_b', function(){  
  console.log('test');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button_a">click me</div>

另一种选择是直接在$("#button_a")处理程序内部分配新处理程序：

$("#button_a").on('click', function(e){
  $("#button_a").off('click');
  $(this).on('click', function(){  
    console.log('test');
  });
  $(this).text('SAVE');   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button_a">click me</div>

如何在JQuery中访问此元素？

1 个答案: