Question

你好，当我点击一些元素时，我试图调用一个函数。

我正在使用symfony php框架做一个表单。按照此： http://symfony.com/doc/current/cookbook/form/form_collections.html#template-modifications

我知道这个： https://stackoverflow.com/a/1207393/4386551

但它不适用于a.delete元素，它仅适用于a.add。

var $collectionHolder;

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
    // Get the ul that holds the collection of tags
    $collectionHolder = $('ul.details');

    // add the "add a tag" anchor and li to the tags ul
    $collectionHolder.append($newLinkLi);

    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $collectionHolder.data('index', $collectionHolder.find(':input').length);

    $addTagLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // add a new tag form (see next code block)
        addTagForm($collectionHolder, $newLinkLi);
    });
    $(".details").on("click", "a.add", function (){alert("HEY");});
    $(".details").on("click", "a.delete", function (){alert("HEY");});

});

function addTagForm($collectionHolder, $newLinkLi) {
    // Get the data-prototype explained earlier
    var prototype = $collectionHolder.data('prototype');

    // get the new index
    var index = $collectionHolder.data('index');

    // Replace '__name__' in the prototype's HTML to
    // 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 next item
    $collectionHolder.data('index', index + 1);

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
    addTagFormDeleteLink($newFormLi);

}

function addTagFormDeleteLink($tagFormLi) {
    var $removeFormA = $('<a href="#" class="delete">delete this tag</a>');
    $tagFormLi.append($removeFormA);

    $removeFormA.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // remove the li for the tag form
        $tagFormLi.remove();
        //reload_total();

    });
}

a.delete和jquery.on的错误是什么？

Answer 1

尝试更改为：

$(".details a.add").on("click", function (){alert("HEY");});
$(".details a.delete").on("click", function (){alert("HEY");});

或者这个：

$(".details").on("click", "a.add, a.delete", function (){alert("HEY");});

无法将jquery委托应用于动态生成的元素

1 个答案: