Jquery fire function problem for elements added via ajax

Try

$(''#UploadButtonContainer'').on('click','#UploadButton', function() {




You need to bind the even using .on to the new element's container

Hi.
Can you please show me how to do this with this code?
$(".UploadButton").ajaxUpload({
url : "upload.php",
name: "file",
onSubmit: function() {
.....
},
onComplete: function(result) {
.....
}
});

Not in there. In

$(function() {
  // here
});

Like this?
 $('#instruc').on('click','.uploader', function() {
       ajaxUpload();
  });

Yes, but wrap that in
$(function() {...});
Try it and see

This is my code:
$('#instruc').on('change','.qq-uploader', function() {
       ajaxUpload();
  });

I get firebug error:
ReferenceError: ajaxUpload is not defined
ajaxUpload();

No wrap YOUR code in the page load code $(function() { here your 3 lines });

It is the main jquery method on page load

Yes i did this so. i missed to write it. I did copy only this. I have other fynctions included in the main $(functio() .....

So any messages in the console?

I cannot help you with the little snippets you have posted so far. I still cannot guess how your buttons are called, where the new buttons live and so on.

Well i tried to do it it as simplier as i can.
Download the zip file with my full code. Included a test html page and my customajaxupload file.
http://www.2shared.com/file/DfnwXjLB/test.html

The upload procces is working for the div that exists on the page but not for the div i add with the addinstruction function.

! The content from the js function is a div like the one that is allready on the page but with a different id and including a form like the one the plug in is generating on page load.

I do not understand where the button is loaded with Ajax. I only see a json call

Hi.
Tis one will show you what i mean.
The function is not firering for the div you will add with addinstruction function
http://www.2shared.com/file/5cmgZibm/test.html

Sorry. I am not going to execute an unknown .exe on my work PC.

Can you upload the pages on a site somewhere?

Click the small Download blue button not the big one. It is only the file. No exe

That invited me to find a f*ck buddy on my office computer. Not great.

I will no longer click anything from that site. It is either compromised or tries to install a virus. All download buttons go to an EXE file and clicking to get to one gave me a fullscreen porn page

http://www.siteadvisor.com/sites/http%3A//www.2shared.com/

I'm sorry but i have not this kind of problems. I will not use it any more.
Here is a rapidshare link.
http://rapidshare.com/files/3597745753/test.zip

Ok, running the page in Firefox. If I click the square, I get a prompt with an
Edit
  Select

I click the select and get to choose an image

I select an image and I get

Uploading...

so what are the steps to find your issue?

click the add link.
A new field will be added (the content of : testcontent.html). when you select a file here the upload function is not working.

Replace last line before the scripts:
<a href="#" id="addinstruction">Add</a>
I have one image there instead of : "Add" you can't see it.

Ah, now getting somewhere.

"<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">XML Parsing Error: undefined entity
Location: testcontent.html
Line Number 7, Column 63:<sourcetext>            &lt;i class="qq-ui-icon ui-icon-wrench" title="Edit"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/i&gt;
--------------------------------------------------------------^</sourcetext></parsererror>"

So I fixed the XML and am now getting s jQuery error in 1.9.1

TypeError: context is null
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
Line 4392

I have a hard time getting to where that is appearing

Seems to work better when I do

    $('#addinstruction').on('click', function () {
      $("<div/>").load("testcontent.html").appendTo("#instruc");
   });

hmmm......
The div is loading the content.
The problem i have is that after selecting one image (in the new div) nothing happens

Don't care about after firering.

mplungjan
The ajaxUpload function is creating the form with the input file field on page load for every .qq-uploader li element and add an iFrame in the bottom of the page.
I'm "simulating" this adding the new div.

By  input.change(function (e) line 49 in the plugin js file  i get the validation and finally the upload function for the divs that exists on pageload but not for the new ones.
May be i need new script for this case.

Hmm.

The plugin only handles ONE iframe since it is using the same ID if you execute more than once. I think you need a new script that can handle more than one upload
Also I think that perhaps that script should not need to ajax the new form in each time, but create one and append it with the relevant event handlers.

......a new script that can handle more than one upload
It is working for me with multiple uploadfields using class attributes and a different holder id..  Also the loaded page has a dynamic content with a different id every time.

........but create one and append it with the relevant event handlers.
Can you explain this please?

Hi.
I removed completele the plugin.
I created a new function to the onchange event of the input file with a class value.
I tried to use some of my old code.
I have a problem now with the response.

after first submitting i have a content in my iFrame but the alert shows nothing.
The second submitting is working.

I add the form element manually without any script but for the existing div the upload now is not firering.Only for the new added one.

I think we are near to the solution.
Please take a look:
http://rapidshare.com/files/3517134510/newtest.zip

(i don't know if i could use something like onSubmit or onComplete too)

form.submit();
         var response = $('#__ajaxUploadIFRAME').contents().find('html body').text();
does not make sense.

You need the result from the submit to execute stuff. You cannot rely or content being available right after the submission

This makes sense .
Any work around. I need something that will get the content ,when i get something from the action page.

tell me again why you need to submit the form and not ajax the form?

I was just looking how this was done with the plugin.
1). It did add an iframe,  2) add as target the iFrame id and finally 3) submit the form.

May be i'm wrong .

What are you suggesting?

Ok.
Thank you for your help.
I will check this tutorial. Maybe using the jquery.form plugin would solve the problems too.

thank you
regards
panos