Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Thomas
Michael Thomas
10,910 Points

jQuery: I resize the window and the event doesn't fire on newly appended element

I have an img tag that needs to be removed when the window width is < 1025px (display none is of no use in this case, because I'm using swipe.js for mobile and the img tag needs to be totally removed). This img tag is also being referred to in a mouseover function.

Basically when you resize < 1025px the img tag is removed using a jQuery resize function, and when you expand the window back > 1025px the img tag is appended back to it's original place.

This works just fine, the only thing is the mouseover function will not fire on the newly appended img tag? (Ok, so I've come back to edit my question, I have added the mouseover function to the window resize function and everything works but there must be a way to do this without duplicating that code - should I declaring the function out side of document ready and then call them on both doc ready and resize? Sorry this question is getting long winded!)

var myLogo = $('img.logo');
var myBlock = $(".block-image");

var windowWidth = $(window).width();
if (windowWidth > 783 && windowWidth < 1025) {

    $(myLogo).remove();
    $(innerBlock).removeClass('full-site');
    $(myBlock).css('background-image', function () {
        var bg = ('url(' + $(this).data("image") + ')');
        return bg;

    });

} else if (windowWidth < 783) {

    $(myLogo).remove();
    $(innerBlock).removeClass('full-site');
    $(myBlock).css('background-image', function () {
        var bg = ('url(' + $(this).data("image-portrait") + ')');
        return bg;

    });
}

$(window).resize(function() {

  var newWindowWidth = $(window).width();
  var webLogo = $('<img src="images/logo.png" class="logo" />');

  if (newWindowWidth > 783 && newWindowWidth < 1025) {

    $(myLogo).remove();
    $(innerBlock).removeClass('full-site');
    $(myBlock).css('background-image', function () {
        var bg = ('url(' + $(this).data("image") + ')');
        return bg;

    });

    } else if (newWindowWidth < 783) {

    $(myLogo).remove();
    $(innerBlock).removeClass('full-site');
    $(myBlock).css('background-image', function () {
        var bg = ('url(' + $(this).data("image-portrait") + ')');
        return bg;

    });

  } else {

    $(innerBlock).addClass('full-site');
    $(myBlock).removeAttr("style");
    if (!$('.logo').length) {
      $('.swipe-wrap').before(webLogo);
    }
  }

1 Answer

Adam Fichman
Adam Fichman
9,502 Points

you can put all of that code into it's own function, and then simply call the function within the $(window).resize() and on document ready.

Michael Thomas
Michael Thomas
10,910 Points

Awesome, thanks Aaron!