jquery - 为同一类中的每个按钮添加其他 jQuery 函数

Question

我想将删除两个 div 的功能添加到我页面上 removeButton 类的所有按钮。示例：第一个按钮功能将删除 id 为“Region0Div”的 div，第二个按钮功能将删除 id 为“Region1Div”的 div 等。删除按钮是由 AjaxFileUpload 控件动态生成的，我无法通过 id 找到它。我尝试了类似迭代的方法，但它不起作用，因为函数同时分配给类的所有按钮。

$(document).change(function () {
            $(".removeButton").click(function () {
                $("#Region" + itr + "Div").remove();
                $("#Comment" + itr + "Div").remove();
                itr = itr + 1;
            });
        });

编辑：

我尝试了每一个，但仍然无法正常工作，将 Region0Div remove 分配给所有按钮。

var itr = 0;

        $(document).change(function () {

            $(".removeButton").each(function () {
                console.log(itr);
                $(this).click(function () {

                    $("#Region" + itr + "Div").remove();
                    $("#Comment" + itr + "Div").remove();
                    itr = itr + 1;
                });
            });
        });

如果我将 itr = itr + 1 放在 click 函数之外，在每个函数中，它也不起作用。

Answer 1

当事情发生时，您不应该分配事件处理程序。一般规则是 - 将事件处理程序分配给页面上存在的元素并委托：

假设您有一个这样的按钮：

<button class="removeButton" data-div1="d1" data-div2="d2">Remove</button>
<div id="d1"></div>
<div id="d2"></div>

和这样的JS：

$('body').on('click', '.removeButton', function () {
    var btn = $(this), id1 = btn.data('div1'), id2 = btn.data('div2');
    $('#' + id1).remove();
    $('#' + id2).remove();
});

如果你这样做，你：

• 只分配 1 个事件侦听器，而不是按钮；
• 不必每次都循环遍历；
• 每次重新加载按钮时都不必更新处理程序；

Answer 2

尝试这个

$(".removeButton").on("click", function(i){
    $("#Region" + i + "Div").remove();
    $("#Comment" + i + "Div").remove();
 });

希望这对你有帮助

Answer 3

如果你使用

$(".removeButton").each()

您可以循环浏览它们并一次更改一项。

jQuery Each()

Answer 4

您可以尝试使用属性 Starts With Selector [name^="value"]

$("[id^=Region]" ).remove();

或者您可以each()使用id

$("[id^=Region]").each(function(index, value){
    $("#Region" + index + "Div").remove();
})

Answer 5

嗨，下面的代码会做..

$(".removeButton").each(function (i) {
                $("#Region" + i + "Div").remove();
                $("#Comment" + i + "Div").remove();

            });