event.target in not defined in Firefox and minor error in IE

Question

I have read about 15 different stack overflow questions on Firefox having problems with event. Not of them closely pertained to my function but I figured it was a straight forward problem. I have tried everything that seemed to have worked for their problems and they all fail.

My problem is in Firefox, nothing happens and this is caused by the order I have my code. The order is very important or I'll cause unwanted appending of multiple buttons. I at least understand why it isn't adding and removing a class based on a click function. What I don't understand is I added var event = event || window.event; var event = event || window.event; and tried if(!event) event = window.event; . They all seem to do nothing so I even tried just putting window.event anywhere I had just event at and this also did not work.

My problem in IE, This one at least allows me to click and expand the article which is great but it doesn't append my button once clicked. This one isn't major since the close article button isn't life or death.

My jQuery

function newsArticle() { // Articles Functionality
    $('.article').on('click', function() {
        var self = this;
        var button = $('<span />', {
            'class': 'close',
            text: 'Click to minimize article',
            on: {
                click: function (e) {
                    e.stopPropagation();
                    $(self).stop(true).toggleClass('fullArticle article');
                    $(this).remove();
                }
            }
        });
    if(!event) event = window.event;
    if($(event.target).is('.article')) {
        $(this).append(button);
    }
    else if($(event.target).parents().is('.article')) {
        $(this).append(button);
    }

    $(this).removeClass('article').addClass('fullArticle');
    });
}

newsArticle();

Answer

function newsArticle() { // Articles Functionality
    $('.article').on('click', function(e) {
        var self = this;
        var button = $('<span />', {
            'class': 'close',
            text: 'Click to minimize article',
            on: {
                click: function (e) {
                    e.stopPropagation();
                    $(self).stop(true).toggleClass('fullArticle article');
                    $(this).remove();
                }
            }
        });
    if($(e.target).is('.article')) {
        $(this).append(button);
    }
    else if($(e.target).parents().is('.article')) {
        $(this).append(button);
    }

    $(this).removeClass('article').addClass('fullArticle');
    });
}

newsArticle();

jsfiddle

If jsfiddle doesn't show problem then view on live site --> site

Just scroll all the way down and above footer there is 4 tabs, click on "In the News".

If you need anything else then let me know and sorry for asking this question but I have not been able to find an answer that works.

Answer 1

When you use jQuery, you don't need to do the cross-browser checks ( if(!event) event = window.event; etc) since jQuery does that for you. You should , however, accept the event as a parameter in your event handler:

$('.article').on('click', function(event) {

I like to use e as a convention, to avoid confusion:

$('.article').on('click', function(e) {