如何在jQuery的.on()方法中锁定变量？AJAX动态绑定场景问题

我明白你遇到的困扰了——每次通过AJAX加载新的<a>元素后，点击它们时总会获取到当前链接的实时文本，但你希望能锁定某个特定的文本值，不让后续点击新元素时覆盖它对吧？

这个问题的核心在于：当你用.on()做事件委托时，事件处理函数是在点击发生时才去读取元素的.text()，所以每次点击不同的链接，拿到的自然是新的文本。要锁定这个值，我们可以通过两种实用的方式来实现，下面给你具体的方案：

方案一：用闭包锁定初始固定值 #

如果你的需求是锁定第一次加载时某个链接的文本（比如第一个加载出来的链接），可以用闭包把变量“封存”起来，让事件处理函数始终访问这个固定值：

$.ajax({
  url: url,
  type: type,
  dataType: dataType,
  success: function(data) {
    $('.container').append(data);
    
    // 先获取你想锁定的目标文本，比如第一个加载的a标签内容
    const lockedText = $('.container a').first().text();
    
    // 用立即执行函数（IIFE）创建闭包，把lockedText固定下来
    $('.container').on('click', 'a', (function(fixedText) {
      return function(e) {
        e.preventDefault();
        console.log("锁定的文本：", fixedText);
        // 这里执行加载下一页的逻辑，用的是锁定后的fixedText
        loadNextPage(fixedText);
      };
    })(lockedText));
  }
});

这里的关键是立即执行函数把lockedText作为参数传入，事件处理函数内部的fixedText就永远指向最初的那个值，不会被后续新元素的文本覆盖。

方案二：给每个链接绑定专属的固定文本 #

如果你的需求是每个链接点击时都使用它被加载时的原始文本（哪怕后续链接文本被修改），可以把文本存在元素的data-*属性里：

$.ajax({
  url: url,
  type: type,
  dataType: dataType,
  success: function(data) {
    const $newContent = $(data);
    // 给新加载的每个a标签存入它当前的原始文本
    $newContent.find('a').each(function() {
      $(this).data('originalText', $(this).text());
    });
    $('.container').append($newContent);
    
    // 点击时读取data里的固定值，而不是实时的text()
    $('.container').on('click', 'a', function(e) {
      e.preventDefault();
      const fixedText = $(this).data('originalText');
      console.log("当前链接的固定文本：", fixedText);
      loadNextPage(fixedText);
    });
  }
});

这种方式更灵活，每个链接都保存了自己被加载时的文本，哪怕后续链接的内容被动态修改，点击时还是会拿到最初的那个值。

补充：彻底阻止变量修改（可选） #

要是你想从根源上阻止变量被重新赋值，可以用Object.freeze()冻结变量（针对字符串这类基本类型完全够用）：

const lockedText = Object.freeze($('.container a').first().text());

不过这种场景下一般没必要，前面两种方案已经能完美解决你的问题了。

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