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删除分配给所有按钮。

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外部点击功能，在每个功能中，它也不起作用。

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").each()

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

JQuery Each()

Answer 3

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

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

或者您可以使用each()制作精确的id

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

Answer 4

嗨，下面这段代码会做..

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

            });

Answer 5

试试这个

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

希望这能帮到你

将其他jQuery函数添加到同一个类中的每个按钮

5 个答案: