Question

我有一个带有多个按钮的html页面，它们都执行jquery ajax代码。目前我已经为每个按钮创建了一个click事件处理程序，但有没有更清晰的方法？

$(function() {
    $("#btn_id_1").click(function() {
        $.ajax({
            url: 'url1',
            type: 'POST',
            ...
        }
    }
    $("#btn_id_2").click(function() {
        $.ajax({
            url: 'url2',
            type: 'POST',
            ...
        }
    }
    $("#btn_id_3").click(function() {
        $.ajax({
            url: 'url2',
            type: 'POST',
            ...
        }
    }
}

谢谢，丹尼斯

Answer 1

使用数据属性和无障碍的javascript：

Html示例：

<button class="my-class" data-ajax-url="url1">My button</button>
<button class="my-class" data-ajax-url="url2">My button</button>
<button class="my-class" data-ajax-url="url3">My button</button>
<button class="my-class" data-ajax-url="url3">My button</button>

Javascript：

$(function() {
    $(".my-class").on("click", function() {
         $.ajax({
            url: $(this).data("ajax-url"),
            type: 'POST',
            ...
        })
    });
});

Answer 2

由于每个按钮的网址不同，请为每个按钮添加数据属性，如下所示

<input type="button" data-url="url1" id="btn_id_1">

您可以使用如下的逗号分隔符选择器：

$("#btn_id_1, #btn_id_2, #btn_id_3").click(function() {
        $.ajax({
            url: $(this).data('url'),
            type: 'POST',
            ...
        }
    }

或jQuery start with selector：

 $("[id^=btn_id_]").click(function() {
            $.ajax({
                url: $(this).data('url'),
                type: 'POST',
                ...
            }
        }

Answer 3

使用attribute-selector适合上下文

$("[id^='btn_id_']").click(function() {

       var id = this.id; // get id of the current button

        $.ajax({
            url: 'url' + id.split("_")[1],
            type: 'POST',
            ...
        });
    });

Answer 4

类似的东西：

$("button").click(function (event) {
    var href = event.srcElement.getAttribute("href");
    $.ajax({
        url: href,
        ...
    });
});

编写清晰的jquery代码

4 个答案: