jsでalertを入れないと動かないです...

Question

前提・実現したいこと

下記ソースで、alertを入れなくても、挙動するようにしたいです。
現状、loadが終わった後、alertがあるとクリックファンクションが動くのですが、
無いと何も動かない状況です。

発生している問題・エラーメッセージ

エラーメッセージが特にございません。

該当のソースコード

$(function(){
    var header=$("header");
    var footer=$("footer");
    var menu_content=$("#menu");
    header.load("http://noanoa913.com/financial/header.html");
    footer.load("http://noanoa913.com/financial/footer.html");
    menu_content.load("http://noanoa913.com/financial/menu.html");
    
    alert(1);　//これを消したいです。

    var menu = $('#menu'), 
        menuBtn = $('.header-right.is-sp'),
        body = $(document.body),     
        menuWidth = menu.outerWidth();
    
    menuBtn.click(function(){
        menu.animate({'right' : 0 }, 'fast');
        body.animate({'right': 0 }, 'fast');
        $('#main').css({'position':'fixed' });
        $('.top_bg').css({'margin-top':'0' });
        $('#black').css({'display': 'block'});
    });
    
    $('#black').click(function(){
        menu.animate({'right' : -menuWidth }, 'fast');
        body.animate({'right':0 }, 'fast');
        $('.top_bg').css({'margin-top':'40px' });
        $('#black').css({'display': 'none'});
        $('#main').css({'position':'static' });
    });
    
});

試したこと

onloadとかがよくわからず。。。

補足情報（FW/ツールのバージョンなど）

お忙しいところ、ご確認ありがとうございます。

//index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://noanoa913.com/financial/js/index.js"></script>
  </body>
</html>

Answer 1

namnium1125さんの回答に乗っかる形ですがこれならどうでしょう。load自体がDeferredオブジェクトを返すわけではないようなので、自らDeferredオブジェクトを生成し、loadのコールバック内でresolveを呼び出して同期を取るようにしてみました。

$(function(){
    var header=$("header"),
        footer=$("footer"),
        menu_content=$("#menu"),
    var L1 = $.Deferred();
        L2 = $.Deferred();
        L3 = $.Deferred();
        header.load("http://noanoa913.com/financial/header.html", function() {L1.resolve();}),
        footer.load("http://noanoa913.com/financial/footer.html", function() {L2.resolve();}),
        menu_content.load("http://noanoa913.com/financial/menu.html", function() {L3.resolve();});

    $.when(L1,L2,L3)
    .done(function(){
        var menu = $('#menu'), 
            menuBtn = $('.header-right.is-sp'),
            body = $(document.body),     
            menuWidth = menu.outerWidth();

        menuBtn.click(function(){
            menu.animate({'right' : 0 }, 'fast');
            body.animate({'right': 0 }, 'fast');
            $('#main').css({'position':'fixed' });
            $('.top_bg').css({'margin-top':'0' });
            $('#black').css({'display': 'block'});
        });

        $('#black').click(function(){
            menu.animate({'right' : -menuWidth }, 'fast');
            body.animate({'right':0 }, 'fast');
            $('.top_bg').css({'margin-top':'40px' });
            $('#black').css({'display': 'none'});
            $('#main').css({'position':'static' });
        });
    });
});

Comments

[namnium1125]

私も今調べていたところだったのですけど、返り値はjQオブジェクトみたいですね…(^ ^;

勘違いしてしまっていました、なんというか、ありがとうございます。m(_ _)m

[Masakim]

ご連絡遅くなっておりまして、申し訳ございません。
こちら再度作業に入る際に、試させていただき、ご報告いたします。

[Masakim]

masaya_ohashi様

ご連絡遅くなり、申し訳ございませんでした。
こちらも確認できました。
ありがとうございました。

今回は、LineOfLightning様のご回答が、既存ソースに一番近い形だったため、BAにさせていただきました。
ご了承下さいませ。

引き続き宜しくお願い致します。

Answer 2

$.ajaxで処理してみては？

$(function(){
  var d = $.Deferred();
  $.when(
    $.ajax({url:"http://noanoa913.com/financial/header.html"}).done(function(data){$("header").text(data);d.resolve();}),
    $.ajax({url:"http://noanoa913.com/financial/footer.html"}).done(function(data){$("footer").text(data);d.resolve();}),
    $.ajax({url:"http://noanoa913.com/financial/menu.html"}).done(function(data){$("#menu").text(data);d.resolve();})
    ).done(function(){
      console.log("end");
    });
});

参考までに

以下、sampleで試してみて下さい

• self.htm

<div id="start"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="end"></div>

• get.php

パラメータsleepで指定した秒数後に、その値を表示する

<?PHP
$sleep=filter_input(INPUT_GET,"sleep");
sleep($sleep);
print $sleep;
?>

パターン1($.ajax)

$(function(){
  $("#start").text("start");
  var d = $.Deferred();
  $.when(
    $.ajax({url:"get.php?sleep=3"}).done(function(data){$("#d1").text(data);d.resolve();}),
    $.ajax({url:"get.php?sleep=1"}).done(function(data){$("#d2").text(data);d.resolve();}),
    $.ajax({url:"get.php?sleep=5"}).done(function(data){$("#d3").text(data);d.resolve();})
    ).done(function(){
      $("#end").text("end");
    });
});

パターン2(deferredをwhen)

$(function(){
  $("#start").text("start");
  var d1 = $.Deferred();
  var d2 = $.Deferred();
  var d3 = $.Deferred();
  $("#d1").load("get.php?sleep=3",function(){d1.resolve()});
  $("#d2").load("get.php?sleep=1",function(){d2.resolve()});
  $("#d3").load("get.php?sleep=5",function(){d3.resolve()});
  $.when(
    d1,d2,d3
    ).done(function(){
      $("#end").text("end");
    });
});

パターン3(deferredをwhen + promise)

$(function(){
  $("#start").text("start");
  var d1 = $.Deferred();
  var d2 = $.Deferred();
  var d3 = $.Deferred();
  $.when(
    $("#d1").load("get.php?sleep=3",function(){d1.resolve()}),d1.promise(),
    $("#d2").load("get.php?sleep=1",function(){d2.resolve()}),d2.promise(),
    $("#d3").load("get.php?sleep=5",function(){d3.resolve()}),d3.promise()
    ).done(function(){
      $("#end").text("end");
    });
});

パターン4(promiseを利用)

※jQueryの他に、非対応ブラウザ（とくにIE）向けにライブラリを追加

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

その上で

$(function(){
  $("#start").text("start");
  Promise.all([
    new Promise(function(resolve){$("#d1").load("get.php?sleep=3",function(){resolve(this);})}),
    new Promise(function(resolve){$("#d2").load("get.php?sleep=1",function(){resolve(this);})}),
    new Promise(function(resolve){$("#d3").load("get.php?sleep=5",function(){resolve(this);})}),
    ]).then(function(){
      $("#end").text("end");
    });
});

Comments

[Masakim]

ご連絡遅くなっておりまして、申し訳ございません。
こちら再度作業に入る際に、試させていただき、ご報告いたします。

[Masakim]

yambejp様

ご連絡遅くなり、申し訳ございませんでした。
こちら確認できました。
様々な方法のご提案ありがとうございました。

今回は、LineOfLightning様のご回答が、既存ソースに一番近い形だったため、BAにさせていただきました。
ご了承下さいませ。

引き続き宜しくお願い致します。

Answer 3

試していないので確証はありませんが、.when()と.done()を使えばうまくいくと思います。

$(function(){
    var header=$("header"),
        footer=$("footer"),
        menu_content=$("#menu"),
        L1 = header.load("http://noanoa913.com/financial/header.html"),
        L2 = footer.load("http://noanoa913.com/financial/footer.html"),
        L3 = menu_content.load("http://noanoa913.com/financial/menu.html");
    
    $.when(L1,L2,L3)
    .done(function(){
        var menu = $('#menu'), 
            menuBtn = $('.header-right.is-sp'),
            body = $(document.body),     
            menuWidth = menu.outerWidth();

        menuBtn.click(function(){
            menu.animate({'right' : 0 }, 'fast');
            body.animate({'right': 0 }, 'fast');
            $('#main').css({'position':'fixed' });
            $('.top_bg').css({'margin-top':'0' });
            $('#black').css({'display': 'block'});
        });

        $('#black').click(function(){
            menu.animate({'right' : -menuWidth }, 'fast');
            body.animate({'right':0 }, 'fast');
            $('.top_bg').css({'margin-top':'40px' });
            $('#black').css({'display': 'none'});
            $('#main').css({'position':'static' });
        });
    });
});

Comments

[Masakim]

ご回答ありがとうございました。
ただできませんでした。

http://noanoa913.com/financial/index.html

ID test
PASS test

でございます。

もしよろしければ、再度確認していただけませんでしょうか？

Answer 4

jQueryのload関数は非同期処理です。
同期処理というのは、処理が上から順に行われるものですが、非同期の場合、処理が終わるのを待たないため、順番が逆転することがあります。

つまり、下記のような場合、headerやfooterやmenu_contentのload関数が終わる前に、
click関数が呼び出されてしまうと、menuやblackというid属性を持つ要素がないため、
イベントが登録されなくなってしまいます。

    header.load("http://noanoa913.com/financial/header.html");
    footer.load("http://noanoa913.com/financial/footer.html");
    menu_content.load("http://noanoa913.com/financial/menu.html");


    var menu = $('#menu'), 
        menuBtn = $('.header-right.is-sp'),
        body = $(document.body),     
        menuWidth = menu.outerWidth();

    menuBtn.click(function(){
        menu.animate({'right' : 0 }, 'fast');
        body.animate({'right': 0 }, 'fast');
        $('#main').css({'position':'fixed' });
        $('.top_bg').css({'margin-top':'0' });
        $('#black').css({'display': 'block'});
    });

    $('#black').click(function(){
        menu.animate({'right' : -menuWidth }, 'fast');
        body.animate({'right':0 }, 'fast');
        $('.top_bg').css({'margin-top':'40px' });
        $('#black').css({'display': 'none'});
        $('#main').css({'position':'static' });
    });

当然、load関数やajaxのような非同期処理の場合、処理が終わった後に特定の処理を呼び出したいということはよくあることです。なので、コールバック関数を引数として指定することにより、load関数が終わった後に処理を行わせる仕組みが用意されています。

例）

    var header=$("header");
    var footer=$("footer");
    var menu_content=$("#menu");
    header.load("http://noanoa913.com/financial/header.html");
    footer.load("http://noanoa913.com/financial/footer.html");


    // menu_contentの読込処理が終わった後に下記の無名関数（クリックイベントの登録等）を行う
    menu_content.load("http://noanoa913.com/financial/menu.html",function(){

    var menu = $('#menu'), 
        menuBtn = $('.header-right.is-sp'),
        body = $(document.body),     
        menuWidth = menu.outerWidth();

    menuBtn.click(function(){
        menu.animate({'right' : 0 }, 'fast');
        body.animate({'right': 0 }, 'fast');
        $('#main').css({'position':'fixed' });
        $('.top_bg').css({'margin-top':'0' });
        $('#black').css({'display': 'block'});
    });

    $('#black').click(function(){
        menu.animate({'right' : -menuWidth }, 'fast');
        body.animate({'right':0 }, 'fast');
        $('.top_bg').css({'margin-top':'40px' });
        $('#black').css({'display': 'none'});
        $('#main').css({'position':'static' });
    });

});

Comments

[Masakim]

ご連絡遅くなっておりまして、申し訳ございません。
こちら再度作業に入る際に、試させていただき、ご報告いたします。

[Masakim]

ご連絡遅くなり、申し訳ございませんでした。
できました。ありがとうございました。
LineOfLightning様のご回答が、既存ソースに一番近い形だったため、BAにさせていただきました。

引き続き宜しくお願い致します。