锚点href不生效求助：Ajax获取内容后twitterAnchor的href未更新

咱们来一步步拆解你遇到的问题：

核心原因：Twitter官方按钮脚本的劫持 #

你给锚点添加了twitter-share-button类，这会触发Twitter的嵌入式Widget脚本（如果页面引入过的话）自动把原生<a>标签转换成Twitter官方的分享按钮组件。一旦转换完成，你后续通过document.getElementById('twitterAnchor').href修改的只是原来的原生标签，但页面上实际显示的已经是Twitter生成的新元素了——你的修改根本不会生效，点击时自然就是Twitter默认的无参行为（表现为页面刷新）。

另外还有个次要问题：你直接把名言内容拼进URL，没有做URL编码，如果名言里有空格、引号或特殊字符，会导致URL格式错误，就算href生效了，分享内容也会出问题。

修复方案 #

方案1：自定义Twitter分享按钮（最简单直接）

去掉twitter-share-button类，避免Twitter脚本劫持，同时对分享内容做URL编码：

jQuery('#button').on('click', function(){
  jQuery.ajax({
    url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
    type: 'GET',
    dataType: "jsonp",
    success: function(json){
      // 移除内容里的HTML标签，让分享文本更干净
      const quoteContent = json[0].content.replace(/<\/?p>/g, '');
      document.getElementById('quote').innerHTML = quoteContent;
      // 对内容做URL编码，避免特殊字符破坏链接结构
      const tweetUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(quoteContent);
      document.getElementById('twitterAnchor').href = tweetUrl;
    }
  });
});

对应的HTML修改：

<div id="tweet">
  <a id="twitterAnchor" href="" target="_blank">Tweet</a>
</div>

你可以自己给这个a标签加CSS样式，模仿Twitter按钮的外观，这样完全可控，不会被第三方脚本干扰。

方案2：使用Twitter Widget API更新官方按钮（如果要保留官方样式）

如果你坚持要用Twitter的官方按钮，需要调用Twitter提供的API动态创建/更新按钮，而不是直接修改href：

// 确保Twitter脚本加载完成后再执行逻辑
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

jQuery('#button').on('click', function(){
  jQuery.ajax({
    url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
    type: 'GET',
    dataType: "jsonp",
    success: function(json){
      const quoteContent = json[0].content.replace(/<\/?p>/g, '');
      document.getElementById('quote').innerHTML = quoteContent;
      
      // 先清空容器，再创建新的官方按钮
      const tweetContainer = document.getElementById('tweet');
      tweetContainer.innerHTML = '';
      
      twttr.widgets.createShareButton(
        '', // 此处无需填写URL，仅需分享文本
        tweetContainer,
        {
          text: quoteContent,
          size: 'large' // 可选：设置按钮尺寸
        }
      );
    }
  });
});

对应的HTML只需保留容器：

<div id="tweet"></div>

额外提示 #

• 测试时可以在成功回调里加console.log(tweetUrl)，确认生成的链接格式是否正确。
• 移除名言内容里的HTML标签很重要，不然分享的文本会带<p>这类标签，影响阅读体验。

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