javascript - QuickPager Javascript 适用于一次单击，但不适用于第二次单击

Question

这里是 JavaScript 菜鸟。

我已经修改了在线可用的插件，以更新菜单以仅显示当前所选的 10 个条目 -5/+5。它实际上适用于第一次点击，然后停止工作(点击 a href 在第一次点击之后不执行任何操作)。

有人能帮我指出我把这件事搞砸的地方吗？

我知道这是一种分页方法，也许不是最佳实践，但对于我正在使用的应用程序和我对 Javascript 的了解来说，这是最简单的方法(无)。

/*-------------------------------------------------
    Quick Pager jquery plugin

    Copyright (C) 2011 by Dan Drayne

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.

    v1.1/   18/09/09 * bug fix by John V - http://blog.geekyjohn.com/
-------------------------------------------------*/

(function($) {

  $.fn.quickPager = function(options) {

    var defaults = {
      pageSize: 10,
      currentPage: 1,
      holder: null,
      pagerLocation: "both"
    };

    var options = $.extend(defaults, options);


    return this.each(function() {


      var selector = $(this);
      var pageCounter = 1;

      selector.wrap("<div class='PaginationContainer'></div>");

      selector.children().each(function(i){

        if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
        $(this).addClass("PaginationPage"+pageCounter);
        }
        else {
          $(this).addClass("PaginationPage"+(pageCounter+1));
          pageCounter ++;
        }

      });

      // show/hide the appropriate regions
      selector.children().hide();
      selector.children(".PaginationPage"+options.currentPage).show();

      if(pageCounter <= 1) {
        return;
      }

      //Build pager navigation
      var pageNav = "<ul class='pagination'>";
      for (i=1;i<=pageCounter;i++){
        if (i==options.currentPage) {
          pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
        }
        else{
          if(i<=10){
            pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
          }
        }
      }
      pageNav += "</ul>";

      if(!options.holder) {
        switch(options.pagerLocation)
        {
        case "before":
          selector.before(pageNav);
        break;
        case "both":
          selector.before(pageNav);
          selector.after(pageNav);
        break;
        default:
          selector.after(pageNav);
        }
      }
      else {
        $(options.holder).append(pageNav);
      }

      //pager navigation behaviour
      selector.parent().find(".pagination a").click(function() {

        //grab the REL attribute
        var clickedLink = $(this).attr("rel");
        options.currentPage = clickedLink;

                //Rebuild Pager Nav
        $('.pagination').remove();
        var pageNav = "<ul class='pagination'>";
        for (i=parseInt(options.currentPage)-5;i<=pageCounter;i++){
          if (i==options.currentPage) {
            pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
          }
          else{
            if(i<=parseInt(options.currentPage)+5){
              pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
            }
          }
        }
        pageNav += "</ul>";

        if(!options.holder) {
          switch(options.pagerLocation)
          {
          case "before":
            selector.before(pageNav);
          break;
          case "both":
            selector.before(pageNav);
            selector.after(pageNav);
          break;
          default:
            selector.after(pageNav);
          }
        }
        else {
          $(options.holder).append(pageNav);
        }


        if(options.holder) {
          $(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("active");
          $(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
        }
        else {
          //remove current current (!) page
          $(this).parent("li").parent("ul").parent(".PaginationContainer").find("li.active").removeClass("active");
          //Add current page highlighting
          $(this).parent("li").parent("ul").parent(".PaginationContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
        }


        //hide and show relevant links
        selector.children().hide();
        selector.find(".PaginationPage"+clickedLink).show();

        return false;
      });
    });
  }


})(jQuery);

Answer 1

我通过在引用静态父对象时将 .click 更改为 on('click' 来回答这个问题。

已更改

 selector.parent().find(".pagination a").click(function() 

致:

 $('#PaginationContainer').on('click', '.testClass', function(e) {

完整代码，随意使用和修改。

/*-------------------------------------------------
    Quick Pager jquery plugin

    Copyright (C) 2011 by Dan Drayne

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.

    v1.1/   18/09/09 * bug fix by John V - http://blog.geekyjohn.com/
-------------------------------------------------*/

(function($) {

  $.fn.quickPager = function(options) {

    var defaults = {
      pageSize: 10,
      currentPage: 1,
      holder: null,
      pagerLocation: "both"
    };

    var options = $.extend(defaults, options);


    return this.each(function() {


      var selector = $(this);
      var pageCounter = 1;

      selector.wrap("<div class='PaginationContainer' id='PaginationContainer'></div>");

      selector.children().each(function(i){

        if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
        $(this).addClass("PaginationPage"+pageCounter);
        }
        else {
          $(this).addClass("PaginationPage"+(pageCounter+1));
          pageCounter ++;
        }

      });

      // show/hide the appropriate regions
      selector.children().hide();
      selector.children(".PaginationPage"+options.currentPage).show();

      if(pageCounter <= 1) {
        return;
      }

      //Build pager navigation
      var pageNav = "<ul class='pagination'>";
      for (i=1;i<=pageCounter;i++){
        if (i==options.currentPage) {
          pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
        }
        else{
          if(i<=10){
            pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
          }
        }
      }
      pageNav += "</ul>";

      if(!options.holder) {
        switch(options.pagerLocation)
        {
        case "before":
          selector.before(pageNav);
        break;
        case "both":
          selector.before(pageNav);
          selector.after(pageNav);
        break;
        default:
          selector.after(pageNav);
        }
      }
      else {
        $(options.holder).append(pageNav);
      }

      //pager navigation behaviour
      $('#PaginationContainer').on('click', '.testClass', function(e) {

        //grab the REL attribute
        var clickedLink = $(this).attr("rel");
        options.currentPage = clickedLink;

                //Rebuild Pager Nav
        $('.pagination').remove();
        var pageNav = "<ul class='pagination'>";
        var i2 = 1;
        if(pageCounter<=10){
          i = 0;
        }else{
          i = parseInt(options.currentPage)-5;
        }
        while (i<=pageCounter){
          if(options.currentPage>=6&&pageCounter>10){
            if (i==options.currentPage) {
                pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
              }
              else{
                if(i<=parseInt(options.currentPage)+4){
                  pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
                }
              }
            }
            else
            {
              if(pageCounter<=10){
                if (i==options.currentPage) {
                  pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
                }
                else{
                  if(i>=1){
                    pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>" +i+"</a></li>";
                  }
                }
              }else{
                if (i2==options.currentPage) {
                  pageNav += "<li class='active PaginationNav"+i2+"'><a rel='"+i2+"' href='#' class='testClass'>"+i2+"</a></li>";
                }
                else{
                  if(i2<=10){
                    pageNav += "<li class='PaginationNav"+i2+"'><a rel='"+i2+"' href='#' class='testClass'>"+i2+"</a></li>";
                  }
                }
                i2++;
              }
            }
            i++;
            }
        pageNav += "</ul>";

        if(!options.holder) {
          switch(options.pagerLocation)
          {
          case "before":
            selector.before(pageNav);
          break;
          case "both":
            selector.before(pageNav);
            selector.after(pageNav);
          break;
          default:
            selector.after(pageNav);
          }
        }
        else {
          $(options.holder).append(pageNav);
        }


        if(options.holder) {
          $(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("active");
          $(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
        }
        else {
          //remove current current (!) page
          $(this).parent("li").parent("ul").parent(".PaginationContainer").find("li.active").removeClass("active");
          //Add current page highlighting
          $(this).parent("li").parent("ul").parent(".PaginationContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
        }


        //hide and show relevant links
        selector.children().hide();
        selector.find(".PaginationPage"+clickedLink).show();

        return false;
      });
    });
  }


})(jQuery);