这适用于某些功能而不是其他功能

Question

Normally when writing jQuery i just use functions. This time I want to give it a little sprinkle of best practice and so I followed a tutorial. The javascript itself seems to be correct but I am having a few problems calling certain functions.

 jQuery.noConflict();
    (function($j) {
    'use strict';

function Site(settings) {

    this.windowLoaded = false;

}

Site.prototype = {
    constructor: Site,

    start: function() {
        var me = this;

        $j(window).load(function() {
            me.windowLoaded = true;
        });

        this.attach();
    },

    attach: function() {
        this.getPrimaLink();
        this.onCloseDialog();
        this.triggerDialog();
        this.openLink();
    },

    getPrimaLink: function(){
        if($j('#order-data').is(":visible")){
            $j( ".content-header" ).append($j( "#findPrimaLink" ));
            $j('#findPrimaLink').show();
        } 
    },

    onCloseDialog: function(){
        $j('#dialog').bind('dialogclose', function(event) {
            $j( ".content-header" ).append($j( "#findPrimaLink" ));
            $j('#findPrimaLink').show();
        });
    },

    triggerDialog: function(){
        $j("[title='Create New Customer']").click(function(){
            $j('#findPrimaLink').show();
        >>>>>   this.openDialog(); <<<<<<
        })
    },

    openLink: function(){
        $j('#findPrimaLink').click(function(){
        >>> this.openDialog();   <<<<<

        });
    },

    openDialog: function(){
        $j( "#dialog" ).dialog({
                height: 'auto',
                width: 350,
                modal: true,
                resizable:false,
        }); 
    },


};

$j(document).ready(function($j) {
    var site = new Site();
    site.start();
});

 })(jQuery); 

Within the start and attach function I am able to call each function by placing 'this' in front of it. But when I try to call openDialog() from openLink() and triggerDialog() I get - Uncaught TypeError: undefined is not a function.

Why is this and what should I do to fix it?

Answer 1

For both functions you're having a problem with, you're trying to use this inside of a jQuery function, so this 's scope is to the DOM element, not the Site class .

triggerDialog: function(){
    var site = this;

    $j("[title='Create New Customer']").click(function(){
        $j('#findPrimaLink').show();
        site.openDialog();
        console.log(this); //remove this for production, but you can see that `this` points to a DOM element
    })
},

openLink: function(){
    var site = this;

    $j('#findPrimaLink').click(function(){
        site.openDialog();
    });
},

To understand why this happens, you should read about javascript Closures. Here and here .

PS you have an extra comma after your openDialog function.

PPS It's also worth noting that this is exactly what're you're doing inside the start method.

var me = this;

$j(window).load(function() {
    me.windowLoaded = true;
});