作成する要素の関数を呼び出す

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); 
});

しかし、結果は同じですが、私は仕事をすることができますが、アドレスとメディアのインデックスが増えていないので、私はフォームの最後のアドレスとリストの最後のメディアだけを持っています。

出典

2017-02-15 Grechka Vassili

委任されたイベント処理を使用します。 – Pointy

元気ですか？私はon（ 'click'）メソッドでいくつかのコードを追加しようとしましたが、1つのアドレスと1つのメディアを表示することはできましたが、アドレスとメディアをもう追加できませんでした.... –

http://stackoverflow.com/質問/ 1687296/what-is-dom-event-delegation –

jQuery documentation for .on()に記載されているように、$(document)にハンドラを設定できます。実際のターゲットセレクタを第2パラメータとして渡します。

$(document).on("click", "p.centered", function() { 
    // event handler code here 
});

を1回だけ入力すると、<p class=centered>要素のすべてのクリックがそのコードで処理されます。

出典

2017-02-15 16:18:43 Pointy

私はあなたのソリューションを試しましたが、アドレスとメディアのインデックスは増えていません。アドレスとメディアのcollectionHolderはaddAddressの内部である必要があります。 –

@GrechkaVassiliあなたのコードは決して "インデックス"データを更新しないようです。インクリメントされたインデックス値を戻す必要があります。これにより、次回より大きな数値を取得できるようになります。 – Pointy

作成する要素の関数を呼び出す

答えて

関連する問題