Por que esse código jQuery não funcionará?

Rasgando o cabelo um pouco aqui! Estou tentando criar múltiplas checkboxs de seleção de imagens para que os usuários possam enviar tantas imagens quanto quiserem ao perfil de espécies que criaram.

Estou usando o seguinte código em um arquivo .js:

jQuery (document) .ready (function () {

var i = 2; jQuery('a#add_media').click(function() { input_code = '

' + '' + '' + '

'; 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&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(); } });

Se eu exibir o DOM usando o Firebug, vejo que minhas checkboxs de input aparecem corretamente:

 

No entanto, apenas o primeiro botão abre o quadro de upload?

Desde já, obrigado.

Solutions Collecting From Web of "Por que esse código jQuery não funcionará?"

 jQuery('a#add_media').click(function() { input_code = '

' + '' + '' + '

'; jQuery(input_code).appendTo('#upload_wrapper'); i++; }); jQuery('[id^="upload_image_button"]').click(function() { ... });

Ok, aqui está o seu problema básico.

O primeiro bit do código adiciona uma function ao manipulador de cliques no link add_media, que adiciona outro código HTML de input de bit à página.

O segundo bit do código adiciona uma function ao manipulador de cliques de qualquer coisa que comece com o upload_image_button ID’s.

O problema é que você está entendendo como o javascript funciona no DOM.

No momento em que o código acima é executado, apenas duas coisas estão acontecendo: a) O botão # add_media está recebendo seu manipulador de cliques modificado e b) Qualquer elemento no DOM que começa com o botão upload_image_button está recebendo o manipulador de cliques modificado.

No entanto, as inputs que você está adicionando mais tarde ainda não estão no DOM. Eles não existem como elementos na página … ainda. Então, quando você os adiciona à página mais tarde, eles não possuem os manipuladores de cliques modificados.

jQuery (). clique () é uma modificação direta para o DOM. Está modificando os elementos especificados, mas não é retroativo. Adicionar coisas à página mais tarde não faz magicamente tempo de reversão e adicione as funções aos novos elementos adicionados à página.

Para corrigi-lo, você precisa modificar seu código para que ele adicione seu manipulador de cliques aos elementos recém-criados também, depois de anexá-los ao upload_wrapper.

Além disso, suas inputs têm o mesmo nome = bits “upload_image”, que não funcionarão se você estiver tentando salvar as informações resultantes mais tarde. nome = “upload_image []” funcionará, porém, devido ao gerenciamento de matriz PHP.

OK, fiz as mudanças que Otto sugeriu e está funcionando bem – obrigado.

 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&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 = '

' + '' + '' + '

'; // 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(); } });