Question

我们说我有：

<div id="form">
    <div id="form_field1_0">
        <div id="form_field1_0_att1"></div>
        <div id="form_field1_0_att2"></div>
    </div>
    <div id="form_field1_1">
        <div id="form_field1_1_att1"></div>
        <div id="form_field1_1_att2"></div>
    </div>
    <div id="form_field1_0">
        <div id="form_field1_2_att1"></div>
        <div id="form_field1_2_att2"></div>
    </div>
    //...
</div>

我有一个Javascript函数，可以根据用户的需要添加#form_field1_n个。{/ p>

现在，我想要change()个#form_field1_ n _att1来电。{/ p>

你会怎么做？

这是添加div的Javascript（带有我的id＆＃39; s div）：

<script type="text/javascript">
    $(document).ready(function() {
        var $container = $('div#mybundle_serveur_typesDetails');
        var $addLink = $('<a href="#" id="add_type" class="">Ajouter un type</a>');
        $container.append($addLink);
        $addLink.click(function(e) {
            addSource($container);
            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });

        var index = $container.find(':input').length;

        if (index == 0) {
            addSource($container);
        } else {
            $container.children('div').each(function() {
                addDeleteLink($(this));
            });
        }

        function addSource($container) {
            var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'type n°' + (index+1))
                .replace(/__name__/g, index));

            addDeleteLink($prototype);

            $container.append($prototype);
            index++;
        }

        function addDeleteLink($prototype) {
            $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');

            $prototype.append($deleteLink);

            $deleteLink.click(function(e) {
                $prototype.remove();
                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });
        }
    });
</script>

Answer 1

您可以使用以下模式匹配您的元素：

$('[id^="form_field1_"]')

您还可以为这些元素设置相同的类并匹配它们，即使用

$('.form_field1_class')

...甚至将ID存储在某个数组中并对其进行处理。

但我会选择前两个解决方案之一。

Answer 2

如果你给出所有类别，例如

<div id="form_field1_2_att1" class="att1"></div>

然后你可以在jQuery中使用委托事件处理为它们全部分配一个事件处理程序，无论创建多少个。请记住，<div>没有＆＃34;更改＆＃34;事件，所以我已经使用＆＃34;点击＆＃34;代替：

$(document).on("click", ".att1", function(event) {
   alert($(this).attr("id")); //this line is just as a test
});

通过动态生成div来获取id的div

2 个答案: