0
3つのJavaScript/jQueryパーツを1つに組み立てようとしていますが、できません。基本的に私はdiv#familyMembersListを持っています。ここには家族のコレクションがあります。コレクションはdata-prototypeから作成されます。作成する要素の関数を呼び出す
このデータプロトタイプでは、ファミリーメンバーを作成するボタンをクリックしたときにのみ作成されるdiv#addressListとdiv#mediasListの2つのコレクションがあります。その後、すべての家族に、アドレスとメディアを追加するためにaddボタンを追加する必要があります。
div#addressListとdiv#mediasListは、家族の追加ボタンをクリックすると存在しないため、家族にアドレスとメディアを追加できません。
私は大きすぎるデータ・プロトタイプを貼り付けることはできませんが、それは
<div class="row">
<div id="familyMembersList" data-prototype="
...
<div id="addressList" data-prototype="">...</div>
<div id="mediasList" data-prototype="">...</div>
...
">
<p class="centered"><a href="#" class="add_fmember_link">Add family member</a></p>
</div>
</div>
ようなものだと私の3つのjsファイルは、次のとおりです。 1）
var familyCollectionHolder;
// Set up an "add address" link
var addFMemberLink = $('<a href="#" class="add_fmember_link">Add family member</a>');
var newFamilyLinkP = $('<p class="centered"></p>').append(addFMemberLink);
function addFmemberForm(familyCollectionHolder, newFamilyLinkP){
// Get the data prototype
var prototype = familyCollectionHolder.data('prototype');
// get the new index
var index = familyCollectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
familyCollectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-fmember"></div>').append(newForm);
newFamilyLinkP.before(newFormP);
addFMemberDeleteLink(newFormP);
}
function addFMemberDeleteLink(fmemberFormP)
{
var removeFormP = $('<p class="centered"><a href="#" style="color:red">Delete member</a></p>');
fmemberFormP.append(removeFormP);
removeFormP.on('click', function(e){
e.preventDefault();
fmemberFormP.remove();
})
}
jQuery(document).ready(function(){
// Get the div that holds the collection of addresses
familyCollectionHolder = $('div#familyMembersList');
// add a delete link to all of the existensing forms
familyCollectionHolder.find('div.one-fmember').each(function(){
addFMemberDeleteLink($(this));
});
// add the "add address" anchor
familyCollectionHolder.append(newFamilyLinkP);
// Count the current form inputs
// use that as the new index when inserting a new item
familyCollectionHolder.data('index', familyCollectionHolder.find(':input').length);
addFMemberLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addFmemberForm(familyCollectionHolder, newFamilyLinkP);
})
});
2）
var collectionHolder;
// Set up an "add address" link
var addAddressLink = $('<a href="#" class="add_address_link">Add address</a>');
var newLinkP = $('<p class="centered"></p>').append(addAddressLink);
function addAddressForm(collectionHolder, newLinkP){
// Get the data prototype
var prototype = collectionHolder.data('prototype');
// get the new index
var index = collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
collectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-address"></div>').append(newForm);
newLinkP.before(newFormP);
addAddressDeleteLink(newFormP);
}
function addAddressDeleteLink(AddressFormP)
{
var removeForm = $('<p class="centered"><a href="#" style="color:red">Delete Address</a></p>');
AddressFormP.append(removeForm);
removeForm.on('click', function(e){
e.preventDefault();
AddressFormP.remove();
});
}
jQuery(document).ready(function(){
// Get the div that holds the collection of addresses
collectionHolder = $('div#addressList');
// add the "add address" anchor
collectionHolder.append(newLinkP);
// add a delete link to all of the existing media form elements
collectionHolder.find('div#one-address').each(function(){
addAddressDeleteLink($(this))
});
// Count the current form inputs
// use that as the new index when inserting a new item
collectionHolder.data('index', collectionHolder.find(':input').length);
addAddressLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addAddressForm(collectionHolder, newLinkP);
})
});
3）
var collectionHolder2;
// Set up an "add address" link
var addMediaLink = $('<a href="#" class="add_media_link">Add Contact mean</a>');
var newLinkP2 = $('<p class="centered"></p>').append(addMediaLink);
function addMediaForm(collectionHolder, newLinkP2){
// Get the data prototype
var prototype = collectionHolder.data('prototype');
// get the new index
var index = collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
collectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-media"></div>').append(newForm);
newLinkP2.before(newFormP);
addMediaDeleteLink(newFormP);
}
function addMediaDeleteLink(mediaFormP)
{
var removeForm = $('<p class="centered"><a href="#" style="color:red">Delete Media</a></p>');
mediaFormP.append(removeForm);
removeForm.on('click', function(e){
e.preventDefault();
mediaFormP.remove();
});
}
jQuery(document).ready(function(){
// Get the div that holds the collection of addresses
collectionHolder2 = $('div#mediasList');
// add the "add address" anchor
collectionHolder2.append(newLinkP2);
// add a delete link to all of the existing media form elements
collectionHolder2.find('div#one-media').each(function(){
addMediaDeleteLink($(this))
});
// Count the current form inputs
// use that as the new index when inserting a new item
collectionHolder2.data('index', collectionHolder2.find(':input').length);
addMediaLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addMediaForm(collectionHolder2, newLinkP2);
})
});
addFmemberLinkをクリックすると、div#addressListとdiv#mediasListが存在しないため、作成したファミリにアドレスとメディアを追加できないという問題があります。ありがとうございました ！
EDIT：！ [OK]を、君たちのおかげで、私はこの作品を作るための方法を発見した（私は:(思った）、それが誰かを助けるかもしれない場合、私は私のフランケンシュタインのコードを貼り付けます。だから私は作るために機能しませんでしたそれが容易になります。そして、我々は、私が「アドレスを追加」とリンク「メディアを追加」をして、私たちが働くことができる。 ようこそMRフランケンシュタインが表示されますVARSを作成する「家族のメンバーを追加」をクリック！
/* ADD ADDRESS */
function addAddressForm(collectionHolder, newLinkP){
// Get the data prototype
var prototype = collectionHolder.data('prototype');
// get the new index
var index = collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
collectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-address"></div>').append(newForm);
newLinkP.before(newFormP);
addAddressDeleteLink(newFormP);
}
function addAddressDeleteLink(AddressFormP)
{
var removeForm = $('<p class="centered"><a href="#" style="color:red">Delete Address</a></p>');
AddressFormP.append(removeForm);
removeForm.on('click', function(e){
e.preventDefault();
AddressFormP.remove();
});
}
function handleAcData(collectionHolder,newLinkP)
{
// Get the div that holds the collection of addresses
collectionHolder = $('div#addressList');
// add the "add address" anchor
collectionHolder.append(newLinkP);
// add a delete link to all of the existing media form elements
collectionHolder.find('div#one-address').each(function(){
addAddressDeleteLink($(this))
});
// Count the current form inputs
// use that as the new index when inserting a new item
collectionHolder.data('index', collectionHolder.find(':input').length);
return collectionHolder;
}
// ADD FAMILY MEMBER
function addFmemberForm(familyCollectionHolder, newFamilyLinkP){
// Get the data prototype
var prototype = familyCollectionHolder.data('prototype');
// get the new index
var index = familyCollectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
familyCollectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-fmember"></div>').append(newForm);
newFamilyLinkP.before(newFormP);
addFMemberDeleteLink(newFormP);
}
function addFMemberDeleteLink(fmemberFormP)
{
var removeFormP = $('<p class="centered"><a href="#" style="color:red">Delete member</a></p>');
fmemberFormP.append(removeFormP);
removeFormP.on('click', function(e){
e.preventDefault();
fmemberFormP.remove();
})
}
function handleFcData(familyCollectionHolder,newFamilyLinkP)
{
// Get the div that holds the collection of addresses
familyCollectionHolder = $('div#familyMembersList');
// add a delete link to all of the existensing forms
familyCollectionHolder.find('div.one-fmember').each(function(){
addFMemberDeleteLink($(this));
});
// add the "add address" anchor
familyCollectionHolder.append(newFamilyLinkP);
// Count the current form inputs
// use that as the new index when inserting a new item
familyCollectionHolder.data('index', familyCollectionHolder.find(':input').length);
return familyCollectionHolder;
}
/* ADD MEDIA */
function addMediaForm(collectionHolder, newLinkP2){
// Get the data prototype
var prototype = collectionHolder.data('prototype');
// get the new index
var index = collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
collectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-media"></div>').append(newForm);
newLinkP2.before(newFormP);
addMediaDeleteLink(newFormP);
}
function addMediaDeleteLink(mediaFormP)
{
var removeForm = $('<p class="centered"><a href="#" style="color:red">Delete Media</a></p>');
mediaFormP.append(removeForm);
removeForm.on('click', function(e){
e.preventDefault();
mediaFormP.remove();
});
}
function handleMcData(collectionHolder2,newLinkP2)
{
// Get the div that holds the collection of addresses
collectionHolder2 = $('div#mediasList');
// add the "add address" anchor
collectionHolder2.append(newLinkP2);
// add a delete link to all of the existing media form elements
collectionHolder2.find('div#one-media').each(function(){
addMediaDeleteLink($(this))
});
// Count the current form inputs
// use that as the new index when inserting a new item
collectionHolder2.data('index', collectionHolder2.find(':input').length);
return collectionHolder2;
}
var familyCollectionHolder;
// Set up an "add address" link
var addFMemberLink = $('<a href="#" class="add_fmember_link">Add family member</a>');
var newFamilyLinkP = $('<p class="centered"></p>').append(addFMemberLink);
jQuery(document).ready(function(){
familyCollectionHolder = handleFcData(familyCollectionHolder, newFamilyLinkP);
addFMemberLink.on('click',function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addFmemberForm(familyCollectionHolder, newFamilyLinkP);
var collectionHolder2;
// Set up an "add address" link
var addMediaLink = $('<a href="#" class="add_media_link">Add Contact mean</a>');
var newLinkP2 = $('<p class="centered"></p>').append(addMediaLink);
collectionHolder2 = handleMcData(collectionHolder2, newLinkP2);
addMediaLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addMediaForm(collectionHolder2, newLinkP2);
});
var collectionHolder;
// Set up an "add address" link
var addAddressLink = $('<a href="#" class="add_address_link">Add address</a>');
var newLinkP = $('<p class="centered"></p>').append(addAddressLink);
collectionHolder = handleAcData(collectionHolder, newLinkP);
addAddressLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addAddressForm(collectionHolder, newLinkP);
})
})
});
編集2：以前の解決策は、視覚的に右の結果が、インデックスはアドレスのために、メディアのために増加されていませんが...私のようなイベントの伝播とそれを作るためにしようとしました：
jQuery(document).ready(function(){
familyCollectionHolder = handleFcData(familyCollectionHolder, newFamilyLinkP);
addFMemberLink.on('click',function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addFmemberForm(familyCollectionHolder, newFamilyLinkP);
});
});
$(document).on('click',addAddressLink,function(e){
e.preventDefault();
collectionHolder = handleAcData(collectionHolder, newLinkP);
addAddressForm(collectionHolder, newLinkP);
});
しかし、結果は同じですが、私は仕事をすることができますが、アドレスとメディアのインデックスが増えていないので、私はフォームの最後のアドレスとリストの最後のメディアだけを持っています。
委任されたイベント処理を使用します。 – Pointy
元気ですか？私はon（ 'click'）メソッドでいくつかのコードを追加しようとしましたが、1つのアドレスと1つのメディアを表示することはできましたが、アドレスとメディアをもう追加できませんでした.... –
http://stackoverflow.com/質問/ 1687296/what-is-dom-event-delegation –