JavaScript动态生成<a>标签点击无跳转问题求助

我之前踩过完全一样的坑！问题核心出在你的复选框嵌套在<label>标签内部这个结构上。

为什么点击链接没反应？ #

浏览器有个默认行为：点击<label>标签内的任何元素时，都会自动触发关联表单控件（这里就是你的复选框）的点击事件。所以当你点Google链接时，事件会先冒泡到<label>，触发复选框状态切换——你的代码会立刻移除这个链接，自然没法完成跳转。

几种可行的解决方案： #

方案1：调整HTML结构，分离<label>与复选框

这是最直观的办法，用for属性让<label>和复选框关联，这样只有点击<label>文本才会触发复选框，点击链接不受影响：

<label id="label" for="myCheckLink">
</label>
<input type="checkbox" id="myCheckLink">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS代码还能优化下（用this.checked代替重复获取DOM，更简洁）：

$('#myCheckLink').click(function(){ 
  var x = this.checked; 
  if(x){ 
    $('#label').append('<a href="http://www.google.fr" id="link">Google</a>'); 
  }else{ 
    $('#link').remove(); 
  } 
}); 

方案2：阻止链接的点击事件冒泡

如果没法改HTML结构，可以在添加链接时，阻止它的点击事件向上冒泡到<label>，避免触发复选框状态变化：

$('#myCheckLink').click(function(){ 
  var x = this.checked; 
  if(x){ 
    $('<a href="http://www.google.fr" id="link">Google</a>')
      .appendTo('#label')
      .click(function(e) {
        e.stopPropagation(); // 关键：切断事件冒泡路径
      });
  }else{ 
    $('#link').remove(); 
  } 
}); 

方案3：改用change事件绑定复选框

额外提个更专业的写法：给复选框绑定change事件而非click事件。因为复选框的状态变化还能通过键盘（比如Tab+空格）触发，change事件能覆盖所有交互场景，更健壮：

$('#myCheckLink').change(function(){ 
  var x = this.checked; 
  if(x){ 
    $('<a href="http://www.google.fr" id="link">Google</a>')
      .appendTo('#label')
      .click(function(e) {
        e.stopPropagation();
      });
  }else{ 
    $('#link').remove(); 
  } 
}); 

总结 #

• 方案1适合能调整HTML结构的场景，代码最简洁；
• 方案2适合无法修改HTML的情况，通过事件冒泡解决；
• 方案3是更严谨的写法，覆盖更多交互场景。

内容的提问来源于stack exchange，提问作者floriandaniel