Question

我正在尝试制作一个简单的插件，用于收集给定网址的Facebook喜欢和推文＃（并让用户发送推文或喜欢给定的链接）。在悬停时，总份额计数会扩展为包含喜欢和分享的LI。目前，在鼠标悬停或选择喜欢/共享LIs时，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>');
      });

Answer 1

当你向DOM添加动态元素时，jQuery实际上从未缓存过。您需要使用委托事件，以便在添加动态元素时它们在范围内并且jQuery正在侦听

案例1（直接）：

@BeforeClass
public static void init() {
    PropsUtil.setProps( new MockProps()
            .addProperty( "key1", "silly" )
            .addProperty( "key2", "silly again" ) );
}

==嘿！我希望div＃social中的每个span.twitter都能听到：当你进入mouseenter时，做X.

案例2（委托）：

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

==嘿，div＃target！当你的任何“span.twitter”子元素被鼠标移动时，用它们做X.

<强>摘要

在案例1中，每个跨度都已单独给出说明。如果创建了新跨度，他们将听不到指令，也不会响应点击。对于自己的事件，每个范围直接负责。

在案例2中，只有容器被给予指示;它负责代表代表其子元素。捕获事件的工作已经委派。

jQuery中的链接替换HTML不起作用

1 个答案: