Question

解决：我的问题是我在jQuery生成的HTML上尝试.hover（）。使用.live（）方法解决了这个问题。

我不是一个非常有经验的前端开发人员，我有一点问题。

我正在构建一个简单版本的www.redpen.io，当遇到一个引脚时，我遇到了显示注释的问题。我创建引脚作为包含注释和坐标的对象。每个引脚都存储在一个数组中。问题是.hover（）函数不起作用：

$('.pin').hover(function(){
  $('<div class="commentBox"><div class="tip"></div><p></p></div>').insertBefore('.pins img');
  var id = $(this).attr('id');
  console.log(id);
  if ( pins_array[id].posX < 200 ) { 
    $('.comment').css({'top': pins_array[id].posY + 55, 'left': pins_array[id].posX - 40});
    $('.comment .tip').css({'left': 30});
  }
  else {
    if ( pins_array[id].posX > $('.pins img').outerWidth() - 200) {
      $('.comment').css({'top': pins_array[id].posY + 55, 'left': pins_array[id].posX - 360});
      $('.comment .tip').css({'left': 350});
    }
    else {
      $('.comment').css({'top': pins_array[id].posY + 55, 'left': pins_array[id].posX - 200});
      $('.comment .tip').css({'left': 190});
    }
  }
  $('.comment').text(pins_array[id].comment);
}, function(){
  $('.comment').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="image-wrapper">
  <div class="pins">
    <div id="pin0" class="pin"></div>
    <img src="design.jpg" alt="Design">
  </div>
</section>

我还想提一下我尝试了只有id内容的.hover（）方法，但仍然无效。 .click（）不能正常工作。

更新：我已经用这些东西创建了一支笔。点击图片，发表评论，保存，然后尝试将图钉悬停。 http://codepen.io/cosminn/pen/obWrMZ

很想听听你们这些人的建议！

谢谢！

.hover（）在jQuery中不起作用

0 个答案: