Основная функция JavaScript

Question

у меня эта функция работает

<script type="text/javascript">
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      $('div#loadmoreajaxloader').show();
      $.ajax({
        url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
        success: function(html) {
          if (html) {
            $("#postswrapper").append(html);
            $('div#loadmoreajaxloader').hide();
          } else {
            $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
          }
        }
      });
    }
  });
</script>

Но мне нужно, чтобы происходило то же самое (на устройствах IOS), но вместо того, чтобы это происходило, когда браузер достигает элемента loadmoreajaxeloader, мне просто нужно, чтобы это происходило при событии onclick по ссылке. Спасибо, куча.

Попытка добавить код, но не отформатировать, поэтому здесь это http://pastebin.com/p2VUqZff

Answer 1

Вам нужно разделить Ajax и событие прокрутки.

Итак, создайте функцию для загрузки контента следующим образом:

// Create the load content function
function loadContent(){
    $.ajax({
        url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
        success: function(html){
            if(html){
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else{
                $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
            }
        }
    });
}

Затем привяжите событие прокрутки к окну:

// Set the onscroll event
$(window).scroll(function(){
    if($(window).scrollTop()==$(document).height()-$(window).height()){
        $('div#loadmoreajaxloader').show();
        // IF YOU WANT TO LOAD MORE CONTENT WHEN SCROLLING THEN UNCOMMENT THE NEXT LINE
        // loadContent();
    }
});

Затем установите событие onclick ссылки «Загрузить еще»:

// Bind the click event to the Load More link
$('#loadMore').click(function(e){
    // This will prevent any default action
    e.preventDefault();
    // Load the content
    loadContent();
});

UPDATE

Я забыл убедиться, что события назначены после загрузки страницы. Окружите весь свой javascript этим:

$(document).ready(function(){
    // PUT ALL THE JAVASCRIPT HERE
});

Answer 2

Если вы говорите, что хотите, чтобы код выполнялся как при прокрутке, так и при нажатии на ссылку, вы можете поместить общий код в функцию, которую вы вызываете из всех мест, где он вам нужен:

function doStuff() {
  $.ajax({
    url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
    success: function(html) {
      if (html) {
        $("#postswrapper").append(html);
        $('div#loadmoreajaxloader').hide();
      } else {
        $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
      }
    }
  });
}

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
     $('div#loadmoreajaxloader').show();
     doStuff();
  }
});

$("#idOfYourLinkGoesHere").click(function() {
   doStuff();
   return false;
});

Отмечая, что возврат false из обработчика кликов останавливает поведение по умолчанию для клика по ссылке (т. Е. Предотвращает переход с текущей страницы или возврат к началу страницы).

Я не былНе уверен, что .show() должно было произойти по ссылке, поэтому я оставил его в обработчике прокрутки.Если это применимо к любому из случаев, переместите его в функцию doStuff().

Answer 3

Я думаю, что вы спрашиваете: «Как я могу повторно использовать эту функцию при нажатии на ссылку» - и если да, то ответ такой:

<script type="text/javascript">

  // Declare the AJAX action as a separate function
  var loadMoreContent = function() {
    $.ajax({
      url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
      success: function(html) {
        if (html) {
          $("#postswrapper").append(html);
          $('div#loadmoreajaxloader').hide();
        } else {
          $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
        }
      }
    });
  };

  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      $('div#loadmoreajaxloader').show();
      loadMoreContent(); // Just call the separate function here
    }
  });

  // ...and attach the function as a click handler to the link:
  $('#idOfMyLink').click(function() {
    loadMoreContent(); // Just call the separate function here
    return false; // Return false to prevent navigation away from the page
  });

</script>

Answer 4

Попробуйте заменить части прокрутки чем-то вроде этого:

$('a#moreLoader').click(function() {
    $('div#loadmoreajaxloader').show();
        $.ajax({
            url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
            success: function(html) {
                if (html) {
                    $("#postswrapper").append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
                }
             }
        });

        return false;
});

, где a#moreLoader - это ссылка с 'moreLoader' в качестве идентификатора:

<a id="moreLoader" href="#">load more</a>