Вызов javascript из добавленного содержимого

Question

У меня проблема с вызовом ajax из добавленного содержимого.

Давайте покажем вам мой пример (пример вызывающего АЯКСА запроса от приложенного содержимого, а также другого запроса вызова Ajax от доли не имеет приложенном содержания):

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>

В JSFIDDLE это хорошо работает, но локально нет! странный !

Вы можете найти проблему, связанную с этим примером? Thank's

Answer 1

Из того, что я собрал из исходного кода ajaxupload.js, кажется, что он надеется, что один элемент (или идентификатор элемента) будет доступен при загрузке. На мероприятии onload он связывает с ним множество вещей, используя mousemove и т. Д. Вместо простых click событий. это было сделано по причине (обрабатывать различия в браузерах), но это означает, что:

• ajaxupload только связан с одним HTML элемент, который должен быть доступен на нагрузке
• не представляется возможным (или очень сложной), чтобы имитировать событие щелчка на кнопке #change из кода, поскольку мы точно не знаем, какой тип событий и параметров он требует.

Так, по-моему, у вас есть следующие варианты:

1. создать скрытый вход, который вы связать со вторым AjaxUpload, а затем переместить его в форму каждый раз, когда он показывает

2. изменить библиотеку использовать

---

Чтобы быть более четким по первому варианту, вот working jsfiddle. Идея такова:

• на нагрузке, вы создаете кнопку #choice2, которая скрыта
• каждый раз вы создаете свою модальность, вы двигаться (не клон) вашей кнопки внутри модального
• по модальным близко, вы положили обратно кнопку внутри тела и спрятали ее
• ваша кнопка готова для следующего модального вызова.

Конечно, этот подход является грязным исправлением и работает только тогда, когда вы уверены, что только одному компоненту за один раз нужна скрытая кнопка.