Question

I have a page with images and text.

A user can upload an image through a modal window. I use .js.erb to replace the image on the page with the one the user uploaded.

$('#mailing_body').contents().find("[data-edit-img='<%=escape_javascript(@user_image.location)%>']").attr('src', '<%=escape_javascript(@user_image.image.url(:medium))%>');

Now I want to a jquery function to fire when the image on the page changes.

I tried the following in my js file:

  $("#mailing_body").contents().find("[data-edit-img='header']").live('change',function(){
      alert('change');
  });

But it does not work. What am I doing wrong?

I am using Ruby 1.9, Rails 3.2.2 jquery1.7.2

Answer 1

jQueries Change only works on INPUT elements, unfortunately.

What you will have to to is create an event handler and fire a trigger.
When ever the upload is finished or whenever you expect the image to change you can use jQueries event and trigger system

$('#foo').bind('customEvent', function() {
      alert($(this).text());
});

$('#foo').trigger('customEvent');