Question

我正在使用Drupal 7并在页面上使用View模块获取我的内容。我的寻呼机Views Load More模块。我的缩略图效果悬停，阴影等图像悬停使用此代码：

    var hoverImg = '<div class="hoverimg"></div>';

    $(".thumb").each(function(){
        $(this).children("div").each(function(){
            $(this).find("a").append(hoverImg);
        });
    });

    $(".thumb div").hover(function() {
        $(this).find(".hoverimg").animate({ opacity: 'toggle' });
    });

$(".thumb").hover(function() {
    $(this).find("div").each(function(){
        $(this).find(".shadow").fadeOut(500);
    });
});

在我当前的缩略图上获取数字。这段代码：

var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
    c = 0;
    d = 0;
    var i = 1;
    d = $(this).find('.thumbimg').length;
    $(this).find('.thumbimg').each(function(){
        sayi=i++;
        $(this).append('<div class="img_no">0'+sayi+'</div>');
    });
});

一切都好。开始页面上的所有效果。但是当单击“加载更多”按钮时，我的效果无法在另一页上起作用。

我的观点加载更多js代码：

/**
 * @file views_load_more.js
 *
 * Handles the AJAX pager for the view_load_more plugin.
 */
(function ($) {

  /**
   * Provide a series of commands that the server can request the client perform.
   */
  Drupal.ajax.prototype.commands.viewsLoadMoreAppend = function (ajax, response, status) {
    // Get information from the response. If it is not there, default to
    // our presets.
    var wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
    var method = response.method || ajax.method;
    var effect = ajax.getEffect(response);

    // We don't know what response.data contains: it might be a string of text
    // without HTML, so don't rely on jQuery correctly iterpreting
    // $(response.data) as new HTML rather than a CSS selector. Also, if
    // response.data contains top-level text nodes, they get lost with either
    // $(response.data) or $('<div></div>').replaceWith(response.data).
    var new_content_wrapped = $('<div></div>').html(response.data);
    var new_content = new_content_wrapped.contents();

    // For legacy reasons, the effects processing code assumes that new_content
    // consists of a single top-level element. Also, it has not been
    // sufficiently tested whether attachBehaviors() can be successfully called
    // with a context object that includes top-level text nodes. However, to
    // give developers full control of the HTML appearing in the page, and to
    // enable Ajax content to be inserted in places where DIV elements are not
    // allowed (e.g., within TABLE, TR, and SPAN parents), we check if the new
    // content satisfies the requirement of a single top-level element, and
    // only use the container DIV created above when it doesn't. For more
    // information, please see http://drupal.org/node/736066.
    if (new_content.length != 1 || new_content.get(0).nodeType != 1) {
      new_content = new_content_wrapped;
    }
    // If removing content from the wrapper, detach behaviors first.
    var settings = response.settings || ajax.settings || Drupal.settings;
    Drupal.detachBehaviors(wrapper, settings);
    if ($.waypoints != undefined) {
      $.waypoints('refresh');
    }

    // Set up our default query options. This is for advance users that might
    // change there views layout classes. This allows them to write there own
    // jquery selector to replace the content with.
    var content_query = response.options.content || '.view-content';

    // If we're using any effects. Hide the new content before adding it to the DOM.
    if (effect.showEffect != 'show') {
      new_content.find(content_query).children().hide();
    }

    // Add the new content to the page.
    wrapper.find('.pager a').remove();
    wrapper.find('.pager').parent('.item-list').html(new_content.find('.pager'));
    wrapper.find(content_query)[method](new_content.find(content_query).children());
    if (effect.showEffect != 'show') {
      wrapper.find(content_query).children(':not(:visible)')[effect.showEffect](effect.showSpeed);
    }

    // Attach all JavaScript behaviors to the new content
    // Remove the Jquery once Class, TODO: There needs to be a better
    // way of doing this, look at .removeOnce() :-/
    var classes = wrapper.attr('class');
    var onceClass = classes.match(/jquery-once-[0-9]*-[a-z]*/);
    wrapper.removeClass(onceClass[0]);
    var settings = response.settings || ajax.settings || Drupal.settings;
    Drupal.attachBehaviors(wrapper, settings);
  }

  /**
   * Attaches the AJAX behavior to Views Load More waypoint support.
   */
  Drupal.behaviors.ViewsLoadMore = {
    attach: function (context, settings) {
      if (settings && settings.viewsLoadMore && settings.views.ajaxViews) {
        opts = {
          offset: '100%'
        };
        $.each(settings.viewsLoadMore, function(i, setting) {
          var view = '.view-id-' + setting.view_name + '.view-display-id-' + setting.view_display_id + ' .pager-next a';
          $(view).waypoint(function(event, direction) {
            $(view).waypoint('remove');
            $(view).click();
          }, opts);
        });
      }
    },
    detach: function (context, settings, trigger) {
      if (settings && Drupal.settings.viewsLoadMore && settings.views.ajaxViews) {
        $.each(settings.viewsLoadMore, function(i, setting) {
          var view = '.view-id-' + setting.view_name + '.view-display-id-' + setting.view_display_id + ' .pager-next a';
          $(view, context).waypoint('destroy');
        });
      }
    }
     };
})(jQuery);

我该如何解决这个问题？感谢。

Answer 1

将jQuery更新为1.7.1或1.7.2并使用$ .on（）而不是$ .hover（） - 使用$ .on（），你基本上给它一个“实时”处理程序而不需要将处理程序单独附加到每个元素。使用主容器作为附加选择器，使用.thumb和.thumb img选择器作为触发选择器，如下所示：

$('#main').on('hover', '.thumb', function() {
    // do your hover stuff
}

$。on附加到EXISTING永久DOM元素并侦听在与提供的选择器匹配的子元素上触发的事件。将任何事件侦听器附加到页面呈现时页面上不存在的对象将不起作用。并且.live（）在jQuery 1.7.x中已弃用。

加载更多后，jQuery效果无法正常工作

1 个答案: