【发布时间】:2018-11-15 10:51:13
【问题描述】:
我动态地创建了几个按钮。我使用 jquery 中的 $.on 函数向它们添加了点击处理程序。有时点击工作,有时它不注册点击。我必须再次刷新页面以检查点击是否有效。为什么会这样?
function searchCompany() {
$("#search-result").html('');
let name = $("#company-name").val();
$.ajax({
url: `http://localhost:5000/manualharmonization/query?name=${name}`,
success: function (data) {
data.map((el, i) => {
$("#search-result")
.append(`<tr class="list-item"><td>${el.applicant_original}</td>
<td><button class=${el.flag == 0 ? "button" : "submitted"} id="${i}"
type="button">Select</button></td>
</tr>`);
res.push({
applicant_original: `${el.applicant_original}`,
flag: `${el.flag}`, name_friendly: `${el.name_friendly}`, appl_ref_no: `${el.appl_ref_no}`,
psn_id: `${el.psn_id}`, appl_key: `${el.appl_key}`
})
});
},
error: function (e) {
console.log(e);
alert(JSON.stringify(e));
}
});
$("#search-result").on("click", "button", function () {
if (res[`${event.srcElement.id}`].flag == 0) {
$(`#${event.srcElement.id}`).removeClass("button");
$(`#${event.srcElement.id}`).addClass("submitted");
res[`${event.srcElement.id}`].flag = 1;
} else {
$(`#${event.srcElement.id}`).removeClass("submitted");
$(`#${event.srcElement.id}`).addClass("button");
res[`${event.srcElement.id}`].flag = 0;
}
})
}
【问题讨论】:
-
请提供您的代码
-
你能举个例子吗?
-
没有澄清,很难说出你的问题是什么。希望这会对您有所帮助。在运行脚本 (f12) 之前打开浏览器的控制台,这样它会在
debugger;语句处中断,您可以看到控制台。 -
检查你有事件的元素是否被移除/添加到 DOM。事件侦听器需要停留在未动态更改的元素上。如果是,您总是需要将事件重新附加到所述元素。
标签: jquery clicklistener