克隆表单，按钮在应有的时候不起作用，并且在启动时无法正确显示 [英] Cloning forms, button not working when it should and not displaying correctly on startup
问题描述
我正在为我的WordPress管理页面处理上载媒体表单，但是在阻止它的最终代码方面遇到了一些问题.
I'm working on an upload media form for my wordpress admin page and i'm having a few issues with the final code that's holding it back.
这个想法是，
一个窗体将在启动时显示，无论它是否具有值.如果单击克隆"，它将克隆该表单并增加ID和名称，还将为所有表单添加一个删除"按钮，如果您然后单击任何表单上的删除"，则ID和名称标签将对所有表单减少在此之后，不管发生什么事情，表单将始终为1、2、3、4、5等，请参见小提琴 http://jsfiddle.net/jLc8X/
One form will display at startup whether it has a value or not. if you click clone, it will clone that form and increment the id and name, it will also add a remove button to all the forms, if you then click remove on any form, the id and name tags will de-increment for all forms after it so it doesn't matter what happens, the forms will always be 1, 2, 3, 4, 5 etc see the fiddle http://jsfiddle.net/jLc8X/
第一个问题是:
如果您克隆第一个表单并给两个表单赋值并保存，则刷新页面时，两个表单都将没有删除按钮(除非只有一个，否则所有表单都应具有删除按钮)，然后单击克隆"，删除"按钮将显示在所有表单中，然后将正常运行，您将无法在小提琴中看到它.
If you clone the first form and give both forms a value and save, when you refresh the page, both forms will not have a remove button, (all forms should have a remove button unless there was only one) if you then click clone, the remove button will show for all forms and will then work as normal, you won't be able to see this on the fiddle.
第二个问题是:
当您单击克隆时，可能是您想立即在上载图像，直到保存表单后，该操作才起作用.
When you click clone, the likelihood is that you are going to want to upload an image straight away on the, this does not work until you save the form.
这是代码
我认为第二个问题取决于单独的脚本，但是我已经将它们网格化，但是我无法使其正常工作.
I think the second issue is down to the separate scripts but i've grid joint them and I can't get it to work.
这是jquery，您也可以在小提琴中查看它.
Here's the jquery, you can also view it in the fiddle.
function updateClonedInput(index, element) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "upload_image_link_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
$(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}
$(document).on("click", "button.clone", function(e){
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).parents(".clonedInput").clone();
updateClonedInput(cloneIndex, new_Input);
$('button.remove').show();
});
$(document).on("click", "button.remove", function(e){
e.preventDefault();
$(this).parents(".clonedInput").remove();
if ($('.clonedInput').length < 2) {
$('button.remove').hide();
}
$(".clonedInput").each( function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement);
})
});
// Media Upload
var custom_uploader;
$('.upload_images').click(function(e) {
alert(this.id);
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
var ter = $(this).siblings('input').attr('id');
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#'+ter).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
推荐答案
第一个问题是在页面加载时如何生成html的问题，如果我理解正确，则需要手动添加该按钮.
First issue is problem how you generate html on page load, you need to add that button manually, if I understood right.
第二个问题是由于以下特定代码行:
Second issue is because of this particular line of code:
$('.upload_images').click(function(e) {
这仅绑定到现有元素，并且如果您希望它绑定新按钮，则应将其编写为:
This binds only to existing elements, and if you want it to bind for new buttons, you should write it as:
$(document).on('click','.upload_images',function(e) {
让我知道您的想法.
这篇关于克隆表单，按钮在应有的时候不起作用，并且在启动时无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
