ajax表中的按钮链接

Button Linking in ajax table

本文关键字：按钮 链接 ajax      更新时间：2024-06-28

请看下面的ajax代码，正如你所看到的，我已经设法在每个表行中显示了一个按钮，这很好，问题是每个按钮只会链接到dataurl，我真的需要这样做，这样每个按钮都会链接到不同的地方，但只有事件仍然可用。例如，如果一行消失了，我需要按钮消失吗？因此，增量功能不起作用。

谢谢Sam

这是ajax代码

$.ajax({
    type: 'GET',
    crossDomain: true,
    dataType: 'json',
    url: 'api link for seatwave',
    success: function(json) {
        //var json = $.parseJSON(data);
        for (var i = 0; i < json.results.TicketGroups.length; i++) {
            var section = json.results.TicketGroups[i].TicketTypeName;
            var no = json.results.TicketGroups[i].Qty;
            var price = json.results.TicketGroups[i].
            Price;
            var button =
                "<button class='btn btn-info' data-url='LINK'>Click Here</button>";
            $("#tableid").append("<tr><td>seatwave</td><td>" + section +
                "</td><td>N/A</td><td>N/A</td><td>" + no +
                "</td><td>£"+price +
                "</td><td>" + button + "</td></tr>");
            $("#tableid").find(".btn.btn-info").click(function() {
                location.href = $(this).attr("data-url");
            });
        }
        sortTable();
    },
    error: function(error) {
        console.log(error);
    }
});

在for循环的每次迭代中都要选择所有按钮；

//this line selects all elements with classes .btn.btn-info
$("#tableid").find(".btn.btn-info")

因此，一旦完成，所有按钮都将具有上次创建的按钮的链接。

如果不是

var button = "<button class='btn btn-info' data-url='LINK'>Click Here</button>";

您可以用jQuery对象包装按钮，并将点击处理程序附加到它上：

var button = $("<button class='btn btn-info' data-url='LINK'>Click Here</button>");
button.click(function() {
     location.href = $(this).attr("data-url");
});

当你把按钮添加到dom时，你可以这样做：

//this will retrieve the html element from the jquery object
"</td><td>" + button[0] + "</td></tr>"

我不知道我说得对不对，但我认为您需要设置data-url='LINK'属性的值。

例如，您可以立即在字符串中设置它，如下所示：

var link = isEventAvailable ? json.results.getLink() : undefined;
var button = link ?  "<button class='btn btn-info' data-url='" + link + "Click Here</button>" : return "whatever action";

因此，上面检查事件是否可用，如果是，您可以从任何地方获取链接，如果不将其设置为falsy值，js通常会使用undefined。现在，仅当链接被设置为您想要的任何内容时，才将按钮字符串设置为按钮。

另一条路线：

var button = "<button class='btn btn-info' data-url='LINK'>Click Here</button>";
button.attributes.getNamedItem("data-url").value = link;

这很糟糕，但足够详细，因此您可以在API中查看：元素属性NamedNodeMap

然后查看属性对象

相关文章：