Question

我有以下HTML：

...
<div>
    <select id="select_1" name="select_1">
        <option value="1" selected="selected">Option 1</option>
        <option value="2">Option 2</option>
        ...
    </select>
    <a id="add_1">Add New</a>
</div>
<div>
    <select id="select_2" name="select_2">
        <option value="1" selected="selected">Option 1</option>
        <option value="2">Option 2</option>
        ...
    </select>
    <a id="add_2">Add New</a>
</div>
...

当我点击＆＃34;添加新的＆＃34;链接新的div与select创建。我需要设置新的选择，但不知道该怎么做，因为它还没有存在。我尝试过这样的事情：

$(document).ready(function() {
    $('[id^=add_]').on('click', function() {
        var new_select = $(this).parent().next().find('[id^=select_]'); // This doesn't work. Any way to do it?
        ...
        });
    });
});

感谢。

Answer 1

使用附加到不变的祖先元素的委托事件处理程序作为添加按钮。
使用类添加按钮（那里不需要ID）
优先使用closest parent以允许将来更改DOM。
根据现有项目数
使用模板div，存放在虚拟脚本块中以方便使用。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/455ahpyw/4/

$(document).ready(function() {
    $(document).on('click', '.add', function(e) {
        e.preventDefault();

        var $div = $(this).closest('div');
        // Append the template and replace the id with the existing number of these +1
        var id = "select_" + ($("[id^=select_]").length + 1);
        var $template = $($('#template').html());
        $template.find('select').attr('id', id).attr('name', id);
        $div.after($template);
    });
});

委派事件处理程序的说明：

他们通过监听指定的事件来冒泡到一个不变的祖先，然后他们应用jQuery选择器，然后他们将函数应用于任何匹配导致事件的元素。这意味着它们将处理在事件时存在的元素，而不仅仅是在注册时（即“正常”处理程序连接时）。

jQuery - 如何设置尚不存在的选择

1 个答案: