动态添加id属性的Log Off链接点击事件失效问题求助

你遇到的情况是：页面加载时动态给Log Off链接添加log_out_link的id属性后，绑定的点击事件始终触发不了。先看下你原本的代码：

$(document).ready(function(){ 
  $('ul#main-navigation li').each(function(index) { 
    var text = jQuery.trim($(this).text()); 
    if (text == "Log Off") { 
      $(this).children().attr('id',"log_out_link"); 
    } 
  }); 
}); 

$(document.body).on('click', '#log_out_link', function(e){ 
  e.preventDefault(); 
  alert("edsddd"); 
  return false; 
}); 

问题根源 #

你用了事件委托（绑定在document.body上）来处理动态元素的点击，理论上这种方式支持未来元素的事件捕获，但可能因为页面DOM加载的时序问题，或者页面里其他元素的事件冒泡干扰，导致事件委托没有正确触发。更稳妥的方式是在确认元素已经被添加id之后，直接给该元素绑定点击事件。

修正后的代码 #

$(document).ready(function(){ 
  $('ul#main-navigation li').each(function(index) { 
    var text = jQuery.trim($(this).text()); 
    if (text == "Log Off") { 
      // 先给子链接添加id属性
      $(this).children().attr('id',"log_out_link"); 
      // 立刻给刚创建好id的元素绑定点击事件
      $('#log_out_link').on('click', function(e){ 
        e.preventDefault(); 
        alert("edsddd"); 
        // 这里可以替换成你需要执行的Ajax操作
        return false; 
      }); 
    } 
  }); 
}); 

为什么这样能解决问题？ #

当我们遍历到文本为"Log Off"的li元素时，先给它的子链接完成id添加操作，紧接着就给这个已经存在于DOM中的元素绑定点击事件，完全避免了“元素还未创建就绑定事件”的时序问题，点击时自然能正常触发你需要的操作。

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