Question

我有一个简单的应用程序w /搜索命中api。使用把手将结果呈现在<a>标记中。当用户滚动每个元素时，我已设置悬停以显示图标，但事件未触发：

<html>
<head>
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  <meta charset="UTF-8" />
</head>

<body>
  <div class="about">
    <p>a zipline project for <a href="http://www.freecodecamp.com" target="_blank" tabindex="-1">free code camp</a> by mike</p>
  </div>
  <div class="container">
    <div class="row">
      <div id="search" class="search">
        <h1>wikipedia knows <span class="subScript">[almost]</span> all: give it a shot</h1>
        <div id="searchContainer" class="searchCont">
          <div id="searchBox" class="search-box">
            <i id="glass" class="ion-ios-search-strong"></i>

            <input type="text" id="searchInput" tabindex="1">
            <div id="resetBtn">
              <i id="close" class="ion-ios-close-outline" tabindex="2"></i>
            </div>
          </div>
          <div class="closeIt" id="closeBtn" tabindex="3">close</div>
        </div>
      </div>
    </div>
    <div class="row " id="resultRow">
    </div>
  </div>
</body>
<script id="searchResult" type="text/x-handlebars-template">
  <a target="_blank" href="{{address}}" class="pageLink">
    <div class="linkOut">
    <i class="ion-ios-search-strong"></i>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 result">
      <p class="result-name">{{name}}</p>
      <p class="result-description">{{description}}</p>
    </div>
  </a>
</script>
 </html>

这里是JS：

$(document).ready(function() {

  var search = $('#search');
  var searchForm = $('#searchInput');
  var resetBtn = $('#resetBtn');
  var searchResult = $('#resultRow');
  var closeBtn = $('#closeBtn');
  var searchBox = $('#searchBox');
  var searchGlass = $('#glass');

  search.keypress(function(e) {
    if (e.which === 13) {

      // variable for user input to place a query with
      var userInput = searchForm.val();
      $('#searchContainer').addClass('searchAdjust');
      // flash style to indicate upon enter
      // addclass
      searchBox.addClass('searchFlash');
      // timeout
      setTimeout(function() {
        // remove class
        searchBox.removeClass('searchFlash');
      }, 200);

      // query the wikipedia api
      $.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + userInput + '&callback=?', function(data) {

        // $('#searchContainer').css('margin-top', '0');
        return buildPage(data);
      });
    }

  });

  // build the results using the query results
  var buildPage = function(data) {

    // clears out any previous search results
    $(".pageLink").remove();

    for (var i = 1; i < data.length; i++) {
      var inside = data[i];
      for (var j = 0; j < inside.length; j++) {
        var tabInd = j + 3;
        var second = i + 1;
        var third = i + 2;

        // handlebars templating
        var source = $('#searchResult').html();
        var template = Handlebars.compile(source);

        var context = {
          name: inside[j],
          description: data[second][j],
          address: data[third][j]
        };

        var el_html = template(context);

        $('#resultRow').append(el_html).hide().fadeIn(400);
      }
    }

  }

  // opens and expands the search box 
  search.click(function() {
    searchBox.addClass('expand');
    closeBtn.css('display', 'inline');
    $('.ion-ios-search-strong').css('display', 'none');
    searchForm.css('display', 'inline-block');
    $('.ion-ios-close-outline').css('display', 'inline');
    searchForm.val('').focus();
    resetBtn.show();
  });

  // resets the search
  resetBtn.on('keypress click', function() {
    searchForm.val('').focus();

    clearResults();
  });

  // close the search field
  closeBtn.on('keypress click', function() {
    searchForm.hide();
    resetBtn.hide();
    searchBox.toggleClass('expand');
    searchGlass.show();
    closeBtn.hide();
    clearResults()

    event.stopPropagation();

  });

  var clearResults = function() {
    searchResult.fadeOut(500, function() {
      $(this).empty();
    });
  }

  // hover state  for search results
  $('.pagelink').hover(function() {
  $(this).css({
    'cursor': 'pointer',
    'box-shadow': '1px 1px 4px rgba(0,0,0, 0.5)'});
  $('.linkOut').css(
    {'display': 'inline',
    'cursor': 'pointer'});
});



  $('a.pageLink').on('mouseenter', function() {
    $('.linkOut').show();
    //alert('link');
    // $('.pageLink').css({
    //   'cursor': 'pointer',
    //   'box-shadow': '1px 1px 4px rgba(0,0,0, 0.5)'
    // });
    //$('.linkOut').toggle();
  });
});

感谢任何帮助。

jquery.on（）没有在链接悬停时触发

0 个答案: