在将要创建的元素上调用函数

Question

我试图将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);
    })
});

问题在于，当我们点击addFmemberLink时，div#addressList和div#mediasList已经存在，因此我无法为创建的地址和媒体添加地址和媒体家庭成员。谢谢 ！

编辑：好的，感谢你们我找到了一种方法让这项工作（我想:(）！我粘贴我的Frankenstein代码如果它可以帮助某人：所以我做了一些功能，以便让它变得更容易。然后，当我们点击“添加家庭成员”时，我创建的vars将显示“添加地址”和“＃” 39;添加媒体链接然后我们可以工作。 欢迎弗兰肯斯坦先生！

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

但结果是一样的，我可以完成这项工作，但地址和媒体的索引没有增加所以当我提交表单时，我只有列表的最后一个地址和最后一个媒体.... / p>

Answer 1

如jQuery documentation for .on()所述，您可以在$(document)上设置处理程序，并将实际目标选择器作为第二个参数传递：

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

您只需执行一次，然后<p class=centered>元素的所有点击都将由该代码处理。