jQuery中的链接取代了无法工作的HTML

Link in jQuery replaced HTML not working

本文关键字：工作 HTML 取代 链接 jQuery      更新时间：2023-09-26

我想做一个简单的插件，收集# Facebook喜欢和推文的给定URL(并让用户推文或喜欢一个给定的链接)。有一个总份额计数，扩展到包括喜欢和分享在悬停。目前，在鼠标悬停或选择喜欢/分享列表时，Twitter/Facebook的HTML被一个链接和带有微妙CTA的文本所取代。这个链接应该打开一个新的窗口与共享对话框为给定的社会网站。然而，这个链接似乎根本不起作用。

HTML 

   <html>
  <head>
    <link rel="stylesheet" href="css/style.css" type="text/css">
  </head>
  <body>
    <div id="social">
      <ul>
        <li class="share">
     <p>shares<p>
        </li>
      <li class="twitter"><p>tweets</p></li>
        <li class="facebook"><p>likes</p></li>
      </ul>
    </div>
   <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/app.js"></scrpt>-->
  </body>
</html>
jQuery 

var fbCount,twCount,totalCount,
   urlDebug = 'http://www.google.com',
   urlCurrent = window.location.href,
   twitterCountUrl = 'http://urls.api.twitter.com/1/urls/count.json?url=' + urlDebug + '&callback=?',
    facebookCountUrl = 'https://graph.facebook.com/fql?q=SELECT%20share_count,%20like_count,%20comment_count,%20total_count,commentsbox_count,%20comments_fbid,%20click_count%20FROM%20link_stat%20WHERE%20url=%27' + urlDebug + '%27',
    fbShareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + urlDebug +  "&t=" + document.title + 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600',
    twShareUrl = "https://twitter.com/intent/tweet?text=" + document.title + "url=" + urlDebug;
$('.sharelink').on('click', function() {
window.open( $(this).attr('href') );
return false;
});

function getnumString(num) {
  var numString;
  if (num < 1000) {
    numString = num;
  } else if (num < 10000) {
    // removed my rube goldberg contraption and lifted
    // CMS version of this segment
    numString = num.charAt(0) + ',' + num.substring(1);
  } else if (num < 1000000) {
    numString = (Math.round((num / 1000) * 10) / 10) + "k"
  } else {
    numString = (Math.round((num / 1000000) * 10) / 10) + "M"
  }
  return numString.toString();
}
$.when(
$.getJSON(twitterCountUrl, function twitterCount(data) {
  twCount = data.count;
  $('.twitter').append('<p class="num">' + getnumString(twCount) + '</p>');
}),
$.getJSON(facebookCountUrl,
    function facebookCount(data) {
      fbCount = data.data[0].like_count;
      $('.facebook').append('<p class="num">' + getnumString(fbCount) + '</p>');
    })).done(function(response) {
      totalCount = fbCount + twCount;
      $('.share').append('<p class="num">' + getnumString(totalCount) + '</p>');
});
      $('#social ul').on('mouseover touchstart focusin', function() {
        $('.facebook, .twitter').slideDown("slow");
      }).on('mouseleave touchend focusout', function() {
        $('.facebook, .twitter').hide();
      });
      $('#social .twitter').on('mouseenter focusin', function() {
       $(this).html('<a href="'+ twShareUrl +'">TWEET<br>LINK</a>');
        $(this).children('a').addClass('sharelink');
      }).on('mouseleave focusout', function() {
        $(this).children('a').removeClass('sharelink');
        $(this).html('<p> tweets</p>').append('<p class="num">' + getnumString(twCount) + '</p>');
      });

      $('#social .facebook').on('mouseenter focusin', function() {
        $(this).html('<a href="' + fbShareUrl + '">SHARE<BR>ON FB</a>');
        $(this).children('a').addClass('sharelink');
      }).on('mouseleave focusout', function() {
        $(this).children('a').removeClass('sharelink');
        $(this).html('<p>likes</p>').append('<p class="num">' + getnumString(fbCount) + '</p>');
      });

当你向DOM添加动态元素时，jQuery实际上从未缓存过它。你需要使用委托事件，这样当你添加动态元素时，它们就在作用域中，jQuery就会监听

Case 1 (direct): 
$("div#social .twitter").on("mouseenter focusin", function() {...});

= =嘿!我想要每个张成的空间。twitter内部的div#社会监听:当你得到mouseenter上，做x

案例2(委托):

$("div#social").on("mouseenter focusin", "span.twitter", function() {...});

==嘿，div#target!当你的任何子元素都是span。twitter" get mouseenter, do X with them.

在情形1中，每个span都被单独给定了指令。如果创建了新的跨度，它们不会听到指令，也不会响应点击。每个span 直接对自己的事件负责。

在情形2中，只有容器收到了指令;它负责注意代表子元素的点击。捕获事件的工作已经委托给了。

相关文章：