Question

I am trying to play a video when an image is clicked. I have browsed lots of sites and gathered bits and pieces here and there. I have not done much jquery before and at the moment I am learning it.

The code that is marked in between commented lines is crashing in IE 8, I am using JQuery 1.5.1

var img_container = $(document.createElement('div')).addClass('ad-image');
var img = $(new Image()).attr('src', image.image);            
img_container.append(img);

this.image_wrapper.prepend(img_container);

/*****************************************/
img_container.click(function () {
      $('<object> </object>', { class: 'videoContainer', id: 'vid' }
       ).append = $('<param name="movie" value="http://youtube.com/v/jxXukpxNSx4&hl=en&fs=1&autoplay=1"/>' +
      '<param name="allowFullScreen" value="true"/>' +
      '<param name="height" value="344"/>' +
      '<param name="width" value="425"/>' +
      '<param name="allowscriptaccess" value="always"/>').prependTo('.ad-image-wrapper');
});
        /********************************************/

Answer 1

I think the problem is this .append =. What exactly are you trying to accomplish here?

$('<object> </object>', { class: 'videoContainer', id: 'vid' }
   ).append =

I think you want this:

img_container.click(function () {
  $('<object> </object>', { class: 'videoContainer', id: 'vid' }
   ).append($('<param name="movie" value="http://youtube.com/v/jxXukpxNSx4&hl=en&fs=1&autoplay=1"/>' +
  '<param name="allowFullScreen" value="true"/>' +
  '<param name="height" value="344"/>' +
  '<param name="width" value="425"/>' +
  '<param name="allowscriptaccess" value="always"/>')).prependTo('.ad-image-wrapper');
});

With .append() as a method call.

Also, in the first part of your code, you are mixing and matching jQuery and regular javascript DOM manipulation. Always do it the jQuery way, because it will take care of the cross-browser compatibility issues. Instead of this:

var img_container = $(document.createElement('div')).addClass('ad-image');
var img = $(new Image()).attr('src', image.image);            
img_container.append(img);

Do this:

var img_container = $('<div class="ad-image">');        
img_container.append('<img>', { src: image.image });