Call javascript from appended content

Question

I have a problem calling ajax from appended content.

Let's show you my example (An example calling ajax request from appended content, and other call ajax request from none appended content):

https://jsfiddle.net/r7f3zo92/

$(document).ready(function() {
  new AjaxUpload("#change", {
    action: 'verifImg',
    name: 'uploadfile',
    onSubmit: function(file, ext) {
      if (!(ext && /^(png|jpeg|jpg|bmp|gif)$/.test(ext))) {
        return false;
      }
    },
    onComplete: function(file, response) {

      $("#imagechange").html(response);


    }
  });


  $(document).on('click', '#test', function(ev) {

    $('body').find('#show').remove();
    var modal =
      '<div class="modal fade" id="show" tabindex="-1" role="dialog" aria-labelledby="show">' +
      '<div class="modal-dialog" role="document">' +
      '<div class="modal-content">' +
      '<div class="modal-header">' +
      '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
      '<h4 class="modal-title" id="myModalLabel">Test</strong></h4>' +
      '</div>' +
      '<div class="modal-body">' +
      '<div class="row">' +

      '<div class="form-group">' +

      '<a href="#" class="btn btn-sm btn-default" id="change">Change Image</a>' +
      '<br/>' +
      '<div id="imagechange"></div>' +

      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';




    $('body').append(modal);

    $('#show').modal({
      show: true
    });
    return false;

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://www.phpclasses.org/browse/download/1/file/51812/name/ajaxupload.3.5.js"></script>

<strong>Example with appended content:</strong>
<br/>
<a href="#" id="test">An example to test</a>

<br/>
<br/>
<strong>Direct example:</strong>
<br/>
<div class="form-group">
  <a href="#" class="btn btn-sm btn-default" id="change">Change Image</a>
  <br/>
  <div id="imagechange"></div>
</div>

In JSFIDDLE it's work fine, but locally no ! strange !

Can you find the problem related to this example ? Thank's

I don't know how U structure the file, but check [this post](http://stackoverflow.com/questions/23116431/javascript-code-works-in-jsfiddle-and-but-not-in-the-browser). And [this one](http://stackoverflow.com/questions/20865241/jsfiddle-code-not-working-in-my-own-page) — Mike B, Apr 26 '16 at 12:40
can you try changing `id="test"` to `class="test"` and similar changes in JS code? Logically `id` should be unique in your HTML page. — vijayP, Apr 26 '16 at 12:43
@MikelisBaltruks i made my example exactly like the solution given in your links (Added document ready handler and tried to put the javascript links into the footer) but same problem. — Mac Love, Apr 26 '16 at 12:56

Derlin · Accepted Answer · 2016-04-26T14:31:06.603

0

From what I gathered from the ajaxupload.js source code, it seems like it expects one element (or id of element) available on load. On the onload event, it binds a whole lot of stuffs to it, using mousemove, etc. instead of simple click events. it was done for a reason (handle differences in browsers), but it means that:

ajaxupload is only bound to one html element, which must be available on load
it is not possible (or highly complicated) to simulate a click event on the #change button from code, since we don't know exactly what type of event and parameters it requires.

So, in my opinion, you have the following choices:

create a hidden input that you bind to a second AjaxUpload, then move it into your form every time it shows
change the library you use

To be clearer upon the first choice, here is a working jsfiddle. The idea is:

on load, you create a button #choice2 which is hidden
everytime you create your modal, you move (not clone) your button inside the modal
upon modal close, you put back the button inside the body and hide it
your button is ready for the next modal call.

Of course, this approach is a dirty fix and works only when you are sure only one component at a time needs the hidden button.

edited Apr 26 '16 at 14:31

answered Apr 26 '16 at 13:09

Derlin

9,572
2
32
53

I tried the first solution, but no way to call the hidden button ! i tried this: `$("#change").click();` but nothing ... can you simulate an example about your opinion please ? thank's. – Mac Love Apr 26 '16 at 13:25
you cannot trigger it by code, as I said. You need to move it inside your modal with `$('#change2').appendTo('#modal-body')` for example. – Derlin Apr 26 '16 at 13:30
This solution will be correct if there a way to generate new button automatically when clicking on `#test` and then append it to the modal ? – Mac Love Apr 26 '16 at 14:04
As well, i tried to clone it but do not give working example too, here you can find a test: [link](https://jsfiddle.net/r7f3zo92/1/) – Mac Love Apr 26 '16 at 14:23
Awesome ! problem resolved ... it's what i am looking for, thank you so much. – Mac Love Apr 26 '16 at 15:06

Call javascript from appended content

1 Answers1