href在锚点上不起作用

Question

I have the following piece of javascript. It is using Ajax to get a quote from an API. The quote is presented at the quote div, but the href is not being refreshed at the twitterAnchor.

    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){
            document.getElementById('quote').innerHTML = json[0].content;
            document.getElementById('twitterAnchor').href =  "https://twitter.com/intent/tweet?text=" + json[0].content;    
            }
        });
    });

<!-- Here is the anchor. -->

      <div id="tweet">
          <a id ="twitterAnchor" href="" class="twitter-share-button" target="_blank" >Tweet</a>  
      </div>

When I click the twitterAnchor the page is refreshed. The console shows me nothing, does anybody have a hint of what is happening?

</div>

Answer 1

The id you are selecting is button, not twitterAnchor. So try jQuery('#twitterAnchor')

Secondly you will need to prevent the default behavior of the browser when an anchor is clicked:

jQuery('#twitterAnchor').on('click', function (e) {
  e.preventDefault();
  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) {
      document.getElementById('quote').innerHTML = json[0].content;
      jQuery(this).attr("href","https://twitter.com/intent/tweet?text=" + json[0].content);
    }
  });
});