Question

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

由于萨姆

继承人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);
    }
});

Answer 1

你在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>"

Answer 2

我不知道我是否帮助您，但我认为您要设置data-url='LINK'属性的值。

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

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

所以上面检查事件是否可用，如果是这样你从任何你想要的地方获得链接，如果没有将它设置为假值，js经常使用undefined。现在，只有在链接已设置为您想要的任何内容时，才将按钮字符串设置为按钮。

另一条路线：

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

这很讨厌但很冗长，所以你可以在API中查看它： Element.attributes NamedNodeMap

然后查看属性对象

按钮链接在ajax表中

2 个答案: