調用將被創建的元素上的函數

我正在嘗試在一個程序集中使用3個JavaScript/jQuery部分，我無法做到這一點。基本上我有一個div#familyMembersList我們有一個家庭成員的集合。該集合是從data-prototype創建的。調用將被創建的元素上的函數

在這個數據原型中，我有兩個其他收藏div#addressList和div#mediasList，只有當我們點擊一個按鈕來創建家庭成員時纔會創建。然後在每個家庭成員中，我需要添加一個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); 
    }) 
});

而問題是，當我們點擊addFmemberLinkdiv#addressList和div#mediasList不存在，所以我不能添加地址和媒體到創建的家庭成員。謝謝！

編輯：好，感謝你們我已經找到一種方法，使這項工作（我想:(）我貼我的科學怪人的代碼，如果它可以幫助別人！所以，我做功能，使它更容易。然後，當我們點擊「添加家庭成員」創建，將顯示「添加地址」和「添加媒體」鏈接，然後就可以正常工作。議員歡迎怪人的增值經銷商！

/* 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'）方法中添加一些代碼，可以顯示一個地址和一個媒體，但我無法再添加地址和媒體... –

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

如jQuery documentation for .on()描述，您可以設置一個處理程序上$(document)和通過實際的目標選擇器作爲第二個參數：

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

您只需要這樣做一次，然後所有點擊<p class=centered>元素將由該代碼處理。

來源

2017-02-15 16:18:43 Pointy

好吧，我試過你的解決方案，但地址和媒體的索引不增加，並且據我所知addHolder的地址和媒體必須是addAddress的內部？ –

@GrechkaVassili它看起來像你的代碼永遠不會更新「索引」數據。您必須將遞增的索引值放回原位，以便下一次獲得更大的數字。 – Pointy

調用將被創建的元素上的函數

回答

相關問題