Javascript 从视图中导航时，对div元素的引用为空

我在

initialize

函数中为

主干网.marionete

视图引用一个div。我遇到的问题是，当我离开该视图并返回时，对该div的引用为null。例如：

var div = $('#video_player');
console.log(div);

第一次加载页面时将返回正确的div，但如果我导航到另一个视图并返回，则引用为null

我正在使用别人的代码，因为我的任务是维护和更新一个初创公司的网站

这是他们的

javascript

define(['marionette',
'tpl!templates/views/plan.html',
'localizer',
'common/ServerErrors',
'jquery',
'models/SessionModel',
'common/ServerApiURLs',
'utilities/Events'],
function (
    Marionette,
    tpl,
    localizer,
    ServerErrors,
    $,
    session,
    ServerApiURLs,
    Events) {

'use strict';

//var player;
var PlanView = Marionette.ItemView.extend({
    className: 'membershipItem',
    tagName: 'li',
    template: function(data) {

        return tpl({resources: localizer.resources, plan: data.plan, isLogged: data.logged_in });
    },

    serializeData: function(){
        return { plan: this.model.toJSON(), logged_in:  session.get('logged_in') };

    },

    events : {

        'click .signUp' : 'singUp',
        'click .getStarted' : 'getStarted'
    },

    singUp : function(e) {
        e.preventDefault();
        location.href='#sign-up';
    },

    initialize : function(){
        this.user = session.get('userProfile');
        console.log("initialize is called");

        if(session.get('logged_in') && this.user && this.user.get('plan')){
           this.userPlan = this.user.get('plan').name;
        }

        this.player = new window.YT.Player('video_player',{
                events: {
                'onStateChange': this.onPlayerStateChange,
                'onReady' : this.onPlayerReady

            }
        });

        var div = $('#video_player');
        console.log(div);

        console.log(this.player);


        //that.startscrollstuff();
        //$(window).scroll(function() {
        //    var scrollPosition = $(document).scrollTop();
        //    var scrollBottom = $(window).height() + scrollPosition;
        //    var div = $('#video_player');
        //    var elemTop = div.offset().top;
        //    var elemBottom = div.height() + elemTop;
        //    //console.log("elemBottom " + elemBottom + " scrollBottom " + scrollBottom);
        //    if ((elemBottom <= scrollBottom) && (elemTop >= scrollPosition))
        //    {
        //        this.player.playVideo();
        //    }else{
        //        this.player.stopVideo();
        //    }
        //});



    },

    onPlayerReady: function(event){
        console.log("ready");
        //event.target.playVideo();
        //event.target.mute();
    },

    onPlayerStateChange: function(event) {
        //console.log("state changed");
        //console.log(player);
        //player.stopVideo();
    },

    getStarted : function(e) {

        e.preventDefault();
        if(!this.soldPlan){
            var that = this;
            var token = session.get('token');
            var data = {
                planId: that.model.get('id')
            };
            Events.trigger('show_loading');
            $.ajax({
                url: ServerApiURLs.payment,
                contentType: 'application/json',
                dataType: 'json',
                type: 'POST',
                headers: {token: token},
                data:  JSON.stringify(data),
                success: function (res) {
                    if (res.success) {
                        that.payment = res.payment;
                        that.fillForm();
                        Events.trigger('hide_loading');
                    } else {
                        ServerErrors.showServerError(res.errors);
                        Events.trigger('hide_loading');
                    }
                },
                error: function (mod, res) {
                }
            })
        }
    },

    fillForm : function(){
        $('#paymentForm').attr({'method' : this.payment.form.method, 'action' : this.payment.form.action});
        $('#login').val(this.payment.hidden_fields.x_login);
        $('#amount').val(this.payment.hidden_fields.x_amount);
        $('#description').val(this.payment.hidden_fields.x_description);
        $('#invoice_num').val(this.payment.hidden_fields.x_invoice_num);
        $('#sequence').val(this.payment.hidden_fields.x_fp_sequence);
        $('#timestamp').val(this.payment.hidden_fields.x_fp_timestamp);
        $('#hash').val(this.payment.hidden_fields.x_fp_hash);
        $('#test_request').val(this.payment.hidden_fields.x_test_request);
        $('#show_form').val(this.payment.hidden_fields.x_show_form);
        $('#relay_responce').val(this.payment.hidden_fields.x_relay_response);
        $('#relay_always').val(this.payment.hidden_fields.x_relay_always);
        $('#relay_url').val(this.payment.hidden_fields.x_relay_url);
        $('#token').val(this.payment.hidden_fields.token);
        $('#paymentForm').submit();
    },

    checkSelectedPlan : function(){
        if(this.user.get('plan')){
            if(this.userPlan == 'Basic'){
                if(this.model.get('name') == 'Basic'){
                    this.soldPlan = true;
                    return 'SoldPlan';
                }
            }
            if(this.user.get('plan').name == 'Advanced'){
                if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced'){
                    this.soldPlan = true;
                    return 'SoldPlan';
                }
            }
            if(this.user.get('plan').name == 'Select'){
                if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced' || this.model.get('name') == 'Select'){
                    this.soldPlan = true;
                    return 'SoldPlan';
                }
            }
            if(this.user.get('plan').name == 'Premium'){
                if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced' || this.model.get('name') == 'Select'
                    || this.userPlan == 'Premium'){
                    this.soldPlan = true;
                    return 'SoldPlan';
                }
            }
            if(this.user.get('plan').name == 'Elite'){
                if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced' || this.model.get('name') == 'Select'
                    || this.model.get('name') == 'Premium' || this.model.get('name') == 'Elite'){
                    this.soldPlan = true;
                    return 'SoldPlan';
                }
            }
        }
    },

    onBeforeRender: function() {
        console.log("on before render is called");

        if (session.get('logged_in')) {
            var sheme = this.checkSelectedPlan();
        }
        if (sheme) {
            this.$el.addClass(sheme + '-membershipColorSheme');
        }
        else {
            this.$el.addClass(this.model.get('name') + '-membershipColorSheme');
        }
        var price = this.model.get('price');
        var storage = this.model.get('storage');
        this.model.set('storageForView', storage + 'Gb');
        this.model.set('priceForView', '$' + price);
        return this;
    },

    onShow : function(){
        console.log("on show is called");
    }
});

return PlanView;

---

路由是使用

主干网.木偶网
的路由系统完成的
 我觉得这是个范围问题。需要更多详细信息/代码来实际帮助您。也可能是在渲染时重新附加（错误地）时丢失事件绑定的子视图。编辑帖子以增加答案的清晰度。$（“#video_player”）的作用域不受限制，因此，在您后续访问此页面时，它不存在，因此找不到。作为旁注，在主干视图中引用外部元素是一个坏主意，因为它破坏了封装并导致像您当前遇到的问题一样的问题。那么我如何确定引用到视频播放器的范围？如果我必须参考外部因素，你会建议什么做法？
<div id="main">
<div class="topperBlock" style="">
    <div class="headline">
        <h1>Create <span class="bolder selectLetters"> T</span>he <span class="bolder selectLetters">S</span>tory <span class="bolder selectLetters">O</span>f <span class="bolder selectLetters">Life</span></h1>
        <img src="assets/img/topperBockImg.png">
        <div class="buttonsBlock">
            <a href="#" class="links singUp">Sign Up Now</a>
        </div>
    </div>
    <div class="arrowDown">
        <a href="#content_video"><img src="assets/img/arrowDown.png"></a>
    </div>
</div>

<div class="inner">
    <div id="content_video">
    <center>
        <div id="video_spot">
        <iframe width="700" height="400" frameBorder="0" style="padding-top: 45px" id="video_player"
            src="http://www.youtube.com/embed/wBhdYHZaKWo?enablejsapi=1">
        </iframe>
    </div>
    </center>
</div>
</div>

<div class="inner">
    <div id="content">
        <div class="membershipTitle">
            <h2>{{resources.plans.header}}</h2>
            <p>{{resources.plans.text.one_time_only_fee_to_create_your_forever_legacy}}</p>
            <!--<div id="promoCode">-->
                <!--<input id="inputPromo" placeholder="If you have a promo code, please enter it here">-->
                <!--<button type="submit" id="sendPromo">></button>-->
            <!--</div>-->
        </div>
        <center>
            <ul class="membershipPlans" id="plans">

            </ul>
        </center>
    </div>
    <form id="paymentForm" method="post" action="">
        <input id="login" name="x_login" type="hidden" value="">
        <input id="amount" name="x_amount" type="hidden" value="">
        <input id="description"  name="x_description" type="hidden" value="">
        <input id="invoice_num" name="x_invoice_num" type="hidden" value="">
        <input id="sequence" name="x_fp_sequence" type="hidden" value="">
        <input id="timestamp" name="x_fp_timestamp" type="hidden" value="">
        <input id="hash" name="x_fp_hash" type="hidden" value="">
        <input id="test_request" name="x_test_request"type="hidden" value="">
        <input id="show_form" name="x_show_form" type="hidden" value="">
        <input id="relay_responce" name="x_relay_response" type="hidden" value="">
        <input id="relay_always" name="x_relay_always" type="hidden" value="">
        <input id="relay_url" name="x_relay_url" type="hidden" value="">
        <input type='hidden' name='x_cancel_url'
               value='http://testing.demohoster.com/tsolife/payment.php' />
        <input type='hidden' name='x_cancel_url_text' value='Cancel' />
        <input id="token" name="token" type="hidden" value="">
    </form>
</div>