当我使用ajax并填充和创建表格时，jQuery使用[id^='']获取id
当我使用ajax并填充和创建表格时，jQuery使用[id^='']获取id
提问于 2018-06-17 05:14:51
在jQuery中，我使用ajax，从ajax获取数据后，我使用这些数据创建简单的table，例如
$.ajax({
method: 'GET',
url: '/analyzePage/searchTag/' + tagName,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
setTimeout(function () {
if (data.state == 'error') {
...
}
else {
let table = '<div class="table-responsive pre-scrollable">';
...
$.each(data.tags, function (key, value) {
...
table = table + '<button type="button" class="btn btn-warning btn-icon btn-rounded legitRipple" id="searchTag-' + value.name + '">';
table = table + '<i class="icon-file-plus"></i>';
table = table + '</button>';
table = table + '</td>';
table = table + '</tr>';
});
...
$('.data').html(table);
}
}, 800);
},
error: function (data) {
console.log(data);
}
});在这段代码中以及在$.each中，我添加了具有此id id="searchTag-"' + value.name + '的简单<button>。
现在我的问题是如何使用jquery获取此id？父.data类为div，searchHashTag id为：
我下面的jquery代码不能工作，并且我无法从添加的button中获取id
$("[id^='searchTag']").on('click', function () {
alert($(this).attr("id").split("-")[1]);
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-17 05:34:58
您的按钮是动态加载的。最有可能的情况是，您在元素实际存在于页面上之前声明了click事件处理程序，因此，它找不到它们。你可以用两种方法来解决这个问题。
方法1
仅当元素存在时才添加单击处理程序：
// Inside your ajax callback (every time new buttons are added)
$('.data').html(table);
$("[id^='searchTag']").on('click', function () {/*...*/});方法2 (我推荐这个)
使用事件委派。它将在现有的祖先元素上绑定click事件，并在以后添加的任何按钮上工作：
// Anywhere you want, but it needs to be executed only once
$(document).on('click', "[id^='searchTag']", function(){/*...*/});方法2是首选的，因为使用方法1，例如，如果您有一个Load more按钮，它添加了新的按钮，同时保持以前加载的按钮，则后一个按钮将多次执行单击处理程序。
请注意，使用document作为祖先元素是安全的，因为我们知道在执行代码时它总是存在的，但如果使用一个更精确的容器(它已经存在于您的HTML中)会更好(性能明智)。如果您的.data容器是这种情况，那么您应该使用$('.data').on('click', '[id^...。(同样，只执行此操作一次)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50891789
复制相关文章
相似问题
腾讯云开发者
