Несколько экземпляров jQuery-плагинов в hjml, загруженном ajax

Question

Я использую несколько плагинов для загрузки файлов Blueimp в HTML, загруженном ajax:

$('.edit').click(function(){
    $( "#details" ).show();
    $('#details div').html(ajax_spinner).load(script.php, "parameters");
});

Поэтому, когда вы щелкаете что-то class = "edit", отображается новый div id = "details" (но это было в DOM, когда document.ready), и script.php возвращает форму id = "upload" (которая никогда не отображается в "просмотреть источник", хотя он есть на странице..?

Какое правило / хорошая практика для работы с html добавлено после document.ready?

Теперь в этом "виртуальном DOM" появился новый элемент:

<form id="upload" method="post" action="other_script.php" enctype="multipart/form-data">

  <div id="drop">
    DROP HERE <small>Image .png or .jpg</small>
    <a class="btn mr_button">Browse</a>
    <input type="file" name="upl" />
  </div>
  <ul id="mr_uploaded_files_ul">
    <!-- The global progress bar -->
    <div id="progress" class="progress">
      <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The file uploads will be shown here -->
  </ul>
</form>

И когда я пытаюсь воздействовать на эту "невидимую" часть DOM:

$('#drop a').click(function(){
    alert('Nope. Nothing');
});

Только когда я

$(document).on('click', '#drop a', function() {
    alert('Ah, this works');
});

Но мне нужно больше, чем предупреждение. Целый $('#upload').fileupload({ ... }) пакет обратного вызова не выполняется, возможно, из-за этой проблемы существования DOM. Кстати, я использую эту самую реализацию на других страницах, на простой существующей DOM, и она работает.

Как я могу воздействовать на эти недавно созданные элементы DOM?

Answer 1

Добавьте функцию обратного вызова к вашему load позвоните, а затем инициализируйте вашу форму.

$('#details div').html(ajax_spinner).load(script.php, "parameters", function() {
    $('#upload').fileupload({ ... });
});

Когда вы используете селектор jQuery, такой как $('#upload'), эти элементы уже должны существовать. Форма загрузки не существует до тех пор, пока она не будет загружена, поэтому селектор возвращается пустым, пока не закончится загрузка.

Причина срабатывания оповещения

$(document).on('click', '#drop a', function() {
    alert('Ah, this works');
});

связано с делегированием мероприятия. Узнайте больше здесь: http://learn.jquery.com/events/event-delegation/