Как динамически определять и вызывать функции jQuery

Question

Благодаря this question, я узнал, как я могу динамически создавать элементы HTML на основе выбранной вами пользователем опции.

Теперь, когда пользователи выбирают опцию, скажем, 5, , создаются и отображаются пять групп полей ввода.

Для каждой группы полей ввода существует кнопка загрузки файлов для изображений.

У меня есть функция javascript, которая обнаруживает, когда пользователи загружают изображение, а затем отображает миниатюру этого изображения.

Проблема заключается в том, что мне нужно, чтобы получить доступ к ID каждого <input type="file" id="appraisal_image1">

Я мог бы, конечно, создать несколько определений функций, каждая из которых с различными ID, а затем назвать каждую из этих функций, но мне было интересно, если было выполнено это без копирования &, вставляющего столько кода.

I've attached a jsFiddle that correctly displays the first and second image thumbnails but not subsequent ones since there are no functions defined or called for the rest.

Answer 1

Вместо использования идентификаторов использовать классы и использовать делегирование событий для регистрации обработчиков

В примере ниже дополнительные классы appraisal_image добавляется к входному контролю файла, в котором, как класс thumbnail_image добавляется к элементу изображения

Попробуйте

// Show Thumbnail 
function getThumbnail (input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).closest('.image-ct').find('.thumbnail_image').attr('src', e.target.result).show(); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$('#Number').change(function() { 
    var num = parseInt($(this).val(), 10); 
    var container = $('<div />'); 
    for(var i = 1; i <= num; i++) { 
     container.append('<div class="image-ct ' + i + '"><div class="row"><div class="col-md-6 col-md-offset-3 bottom-15"><label for="file" class="text-center" id="imageNumber' + i + '">Upload Image:</label><input class="light-gray center appraisal_image" type="file" name="appraisal_image' + i + '" id="appraisal_image' + i + '"><br><div class="image-holder"><img class="hide-till-uploaded center thumbnail_image" id="thumbnail_image' + i + '" src="#" alt="your image" /></div></div></div><div class="row"><div class="col-md-2 col-md-offset-5 bottom-15"><label for="Size" id="Size' + i + '">Size</label><input type="text" class="form-control" name="Size' + i + '" placeholder="Rug Size" id="Size' + i + '"></div></div></div>'); 
    } 

    $('#here').empty().append(container); 
}); 
$('#here').on('change', '.appraisal_image', function(){ 
    getThumbnail(this); 
}) 

Демо: Fiddle

Answer 2

Используйте классы вместо идентификаторов, а затем вы можете использовать JQuery в on делегат:

$(".appraisal_image") // get all elements with this class 
    .on("change", function(){ 
     getThumbnail1(this); 
     $(this).css("display", "block"); 
    }); 

on будет добавлять события к элементам, которые еще не существуют. Это означает, что элементы, которые динамически добавляются автоматически назначается событие

about: jquery on

Answer 3

Вы можете использовать этот код, чтобы получить все идентификаторы типа входных данных, которые существуют в вашей форме

[].forEach.call(document.querySelectorAll("input[type='text']"), 
      function (input) { 
       var value = input.value; 
       var id = input.id; 
       alert(id); 
      });