Intereting Posts
Есть ли плагин, позволяющий редактировать сообщения и комментарии на первой странице? wp_nav_menu удалить класс и id из li Регистрация одного пользователя для доступа ко всем сайтам в сети MultiSite WordPress Поместите куки-файл, когда просматривается определенная страница? Повторно обрабатывать изображения Помощь Создание пользовательского типа отправки слайд-шоу с настраиваемыми мета-ящиками? Получить определенное поле из таксономического термина через расширенные настраиваемые поля Выделять пользовательские виджеты в области администратора? Добавление отступов при создании эскиза Избранные изображения не отображаются Изображения водяного знака только для некоторых пользователей почему мое форматирование не работает в моем редакторе wisiwig? Помощь с Magpiers и WordPress Миниатюра для плагинов категорий / таксономий? Изменить мета-описание на определенной странице?

Почему этот код jQuery не работает?

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

Я использую следующий код в файле .js:

jQuery (document) .ready (function () {

var i = 2; jQuery('a#add_media').click(function() { input_code = '<p>' + '<input id="upload_image-' + i + '" type="text" size="36" name="upload_image" value="" />' + '<input id="upload_image_button-' + i + '" type="button" value="Upload Image" />' + '</p>'; jQuery(input_code).appendTo('#upload_wrapper'); i++; }); jQuery('[id^="upload_image_button"]').click(function() { str = jQuery(this).attr('id'); substring = str.substring(str.length, str.length - 1); id_to_pass = 'upload_image-' + substring; alert(id_to_pass); tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('#' + id_to_pass).val(imgurl); tb_remove(); } }); 

Если я затем просмотрю DOM с помощью Firebug, я вижу, что мои поля ввода отображаются правильно:

 <div id="upload_wrapper" style="margin:0; padding:0;"> <label>Attach Image</label> <p> <input id="upload_image-1" type="text" value="" name="upload_image" size="36"> <input id="upload_image_button-1" type="button" value="Upload Image"> <span> </p> <p> <input id="upload_image-2" type="text" value="" name="upload_image" size="36"> <input id="upload_image_button-2" type="button" value="Upload Image"> </p> <p> <input id="upload_image-3" type="text" value="" name="upload_image" size="36"> <input id="upload_image_button-3" type="button" value="Upload Image"> </p> 

Но только первая кнопка открывает рамку загрузки?

Заранее спасибо.

Solutions Collecting From Web of "Почему этот код jQuery не работает?"

 jQuery('a#add_media').click(function() { input_code = '<p>' + '<input id="upload_image-' + i + '" type="text" size="36" name="upload_image" value="" />' + '<input id="upload_image_button-' + i + '" type="button" value="Upload Image" />' + '</p>'; jQuery(input_code).appendTo('#upload_wrapper'); i++; }); jQuery('[id^="upload_image_button"]').click(function() { ... }); 

Ладно, вот твоя основная проблема.

Первый бит кода добавляет функцию обработчику кликов по ссылке add_media, которая добавляет еще один бит входного HTML-кода на страницу.

Второй бит кода добавляет функцию обработчику щелчков чего-либо, начиная с идентификаторов upload_image_button.

Проблема в том, что вы не понимаете, как работает javascript в DOM.

Во время выполнения вышеуказанного кода происходит только две вещи: a) кнопка a # add_media изменяет свой обработчик кликов и b) любой элемент в DOM, начиная с upload_image_button, получает изменение своего обработчика кликов.

Однако входы, которые вы добавляете позже, еще не находятся в DOM. Они не существуют как элементы на странице … еще. Поэтому, когда вы добавляете их на страницу позже, у них нет модифицированных обработчиков кликов.

jQuery (). click () – это прямая модификация DOM. Он изменяет указанные элементы, но не имеет обратной силы. Добавление элементов на страницу позже не приводит к магическому обратному времени и добавлению функций к новым элементам, добавленным на страницу.

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

Кроме того, ваши входы имеют одно и то же имя = «upload_image» биты, которые не будут работать, если вы попытаетесь сохранить эту итоговую информацию позже. name = "upload_image []" будет работать, хотя из-за обработки массива PHP.

Хорошо, я сделал изменения, которые предложил Отто, и он работает красиво – спасибо.

 var uploadClickHandler = function() { str = jQuery(this).attr('id'); substring = str.substring(str.length, str.length - 1); id_to_pass = 'upload_image-' + substring; tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true'); return false; }; jQuery(document).ready(function() { // Find the number of elements using our unique button name var i = jQuery('[id^="upload_image_button"]').size() + 1; jQuery('a#add_media').click(function() { // Variable to store the HTML for adding a new image input_code = '<p>' + '<input id="upload_image-' + i + '" name="upload_image[' + i + ']" type="text" size="36" name="upload_image" value="" />' + '<input id="upload_image_button-' + i + '" type="button" value="Upload Image" />' + '</p>'; // Upon being clicked, append the input_code variable to our #upload_wrapper DIV jQuery(input_code).appendTo('#upload_wrapper'); // Use our uploadClickHandler function to add the iFrame functionality to our "on-the-fly" text boxes jQuery('[id="upload_image_button-' + i + '"]').click(uploadClickHandler); i++; }); // Add click functionality to the pre-JS-created HTML text boxes on our main page jQuery('[id^="upload_image_button"]').click(uploadClickHandler); // iFrame and return value functionality window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('#' + id_to_pass).val(imgurl); tb_remove(); } });