1

我正在使用 Drupal 7 并通过页面上的 View 模块获取我的内容。而我的寻呼机视图加载更多模块。还有我的缩略图效果悬停,阴影等。使用此代码的图像悬停:

    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);

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

4

1 回答 1

0

将您的 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 中已被弃用。

于 2012-04-15T22:50:31.843 回答