jqueryでjquery.bottom-1.0,validateが実行されない。

Question

以下のjavascriptにて、tweetloadを実行させたのですが、
通信1までlogは行くのですが、
$(window).bind('bottom',function(){
文以降が実行されず、
tweetload内のajaxの表示の部分がでません。
bottom部分をコメント文にした場合は、
予定通り、ajaxの表示が働いている状況です。

また、他のjqueryのプラグインvalidateも追加しましたが、
messageが表示されず。

どちらもエラーはでないのですが、
動作しません。

jqueryは、3.1.1
追記
jqueryを2.2.4に変更しました。
cakephp 2.ｘです。

var user_id;
var my_id;

$(function(){
  //15秒ごとに読み込み
  tweet_load();
  console.log('sucess');
  setInterval("tweet_load()", 15000);
  console.log('sucess4');
});

$(document).on('click','button',function(event){
  if(!confirm('本当に削除しますか？')){
        /* キャンセルの時の処理 */
        return false;
    }else{
    event.preventDefault();
            $.ajax({
                type:'POST',
                url: '/cakephp/users/json_data',
                dataType: 'json',
                cache : false,
                data : {id : $(this).val()},
                timeout:10000,
                success: function(data) {
                            //console.log(user_id+' '+my_id+' '+$('textarea').val()+' '+time);
                            console.log('delite_success');
                            tweet_load();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                             alert('error');
                       }
    });}
          });

$(document).on('click','div.submit',function(event) {
    console.log('validate_start');
    $('form').validate({
      rules: {
        textarea: {
          required: true,
          maxlength: 140
        }
      },
      messages :{
        textarea:{
          required: "空白です。",
          maxlength:"140文字以内で入力して下さい。"
        }
      }
    });

    if (!$('form').valid()) {
      console.log('validate_error');
      return false;
    }
    console.log('validate_end');
    event.preventDefault();
            $.ajax({
                type:'POST',
                url: '/cakephp/users/json_data',
                dataType: 'json',
                cache : false,
                data : {'tweet_id': user_id ,'name': my_id , 'tweet' : $('textarea').val()},
                timeout:10000,
                success: function(data) {
                            $('textarea').val("");
                            //console.log(user_id+' '+my_id+' '+$('textarea').val()+' '+time);
                            console.log('sucess');
                            tweet_load();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                             alert('error');
                       }
              });
});


function tweet_load(){

 var end_flag = 0; //最後のページまでいったら1にして次から読み込ませない
$('div.loading').append('loading...'); 
  $(window).bottom({proximity: 0.5}); //proximityを0.5にするとページの50％までスクロールするとloadingがはじまる
  console.log('通信1');
  $(window).on('bottom',function(){
    console.log('通信2');
        var obj = $(this);
        if (!obj.data("loading")) {
          obj.data("loading", true);
  
          $('#loading').append('loading...'); //画面にloading...と表示
          setTimeout(function() {
            $('#loading').remove();
$.ajax({
        type:"POST",
        url: '/cakephp/users/json_data',
        dataType: 'json',
        cache : false,
        timeout: 10000})
    .fail(function(){
            //通信失敗時の処理
            alert('通信失敗');
        })
    .done(function(data){
     alert('通信');
    user_id = data.user_id;
    my_id = data.my_id;
    var i=0;
    console.log('sucess_jsondata'+i);
    $("#output").empty();
    for(i in data.json_data){
    $("#output").append('<a href='+data.json_data[i].Tweet.name+'>'+data.json_data[i].Tweet.name+"</br>");
    var tweet =data.json_data[i].Tweet.tweet;
      tweet =tweet.replace(/\r?\n/g, '<br>');
      tweet =tweet.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ');
    $("#output").append(tweet+"</br>");
    $("#output").append(data.json_data[i].Tweet.tweettime+"</br>");
    //console.log(i);
    if(data.my_id==data.json_data[i].Tweet.name){
    $("#output").append('<button type="button" name="delite" id="delite" value='+data.json_data[i].Tweet.id+'>削除</button></br>');
     }
    $("#output").append("</br>");
    }
  })}, 1500);
      }
    });
      $('html,body').animate({ scrollTop: 0 }, '1');
};

form部分も追加
cakephpのctpです。

<?php 
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js');
echo $this->Html->script('jquery.bottom-1.0'); 
echo $this->Html->script('jquery.validate');
echo $this->Html->css('index');?>

  <?php
	  echo $this->Form->create('Tweet');
	  echo nl2br($this->Form->textarea('tweet', array('cols'=>100, 'rows'=>4,'required' => false,'error'=>false)));
      echo $this->Form->hidden('tweet_id',array('value'=> $user['id']));
	  echo $this->Form->hidden('name',array('value'=> $user['username']));
      echo $this->Form->submit('投稿',array(/*'onclick'=>'index',*/'name' => 'submit'));
 	  echo $this->Form->end();
endif;
?>
	<h3>ホーム</h3>
  <div id="output">
    <div id="delite"></div>
    <div class="loading"></div>
  </div>

Answer 1

jQuery.bind() は3.0以降非推奨になっているため、1系統か2系統を使用してみてはいかがでしょうか。

【.bind() | jQuery API Documentation】
http://api.jquery.com/bind/

Returns: jQueryversion deprecated: 3.0

【jQueryのbindとonの違い - Qiita】
http://qiita.com/nmta/items/310aa1cf385fa55129c1

また、エラーは出ていませんか？デベロッパーツールで確認してみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

Comments

[usuallyi]

bindは非推奨になっていたのですね。
2系統でしましたが、実行されません。

コンソールのログで確認しましたが、
エラーは表示されませんでした。

[kei344]

tweet_load()を何回も呼んでいますが、$(window).on('bottom',function(){を何回も登録することになるうえ、そのイベントまで動作しないので読み込み(AJAX)は起こらないと思います。

$(window).on('bottom',function(){の中身がtweet_load関数として定義されるべきものなのでは。

[usuallyi]

コメントの通り、$(document).ready(function()の中にtweet_loadの中身を移し、
setintervalもコメントにし、
$(window).on('bottom',function()が一度しか動かない様に変更しましたが、動作しませんでした。
やはり、$(window).on('bottom',function()内のプログラムが実行されていません。

[kei344]

https://jsfiddle.net/nw411jug/
とりあえず中の関数を削除して動くかどうか試してから少しずつ中身を実装して行って見るのが良いと思います。

[usuallyi]

$(document).ready(function() {
var end_flag = 0; //最後のページまでいったら1にして次から読み込ませない

$(window).bottom({proximity: 0.5}); //proximityを0.5にするとページの50％までスクロールするとloadingがはじまる
console.log('通信1');
$(window).on('bottom',function(){
$('div.loading').append('loading...');
console.log('通信2');

});
});
中の関数を削除して、
上記の文を実行しましたが、
console.log('通信2')というログがこなかったので、
プラグインが機能していない可能性ってあるのでしょうか？
chromeにてhtmlのソースからjqueryのスクリプトのurlをクリックすると、
プラグイン内のソースが確認できるので、
読み込んでいないというわけでは、ないとおもうのですが.....

[kei344]

> プラグインが機能していない可能性
読み込みに失敗するとエラーが出るので、わかるとおもいます。
proximityの値を変えるとかしてみてはいかがでしょうか。

[usuallyi]

proximityも0.9,0.01など試しましたが、
上手く動作しませんでした。

また、jquery.bottomのdemo.htmlのscript部分と、
divの要素をhtml内に入れて、
確認しましたが、
うまく動作しません。

何か、cakephp内で根本的にまちがえているのかもしれません。

[kei344]

jquery.bottomはスクロールが発生しなければ動かないようです。また、HTMLの構文に問題がある場合（閉じタグなどが無く崩れているなど）も予想と違う挙動をすることもあります。

[usuallyi]

ajaxでjsonで出力するデータは、
3000行近くあるので、
スクロールは、発生しているとおもいます。
HTMLをもう一度見直します。

[usuallyi]

一度、20件ほど初期に表示してから、
それ以後、jsonにて、
windowをうごかしましたら、
jquery.bottomの動作が確認できました。

page情報をjsonにて送ろうとしたら、
ajaxがエラーになってしまっていますが、
また、別に質問いたします。

回答して頂きありがとうございました。