如何在 AJAX 调用后创建的格式化 HTML 上调用 JQuery 操作？
Posted
技术标签:
【中文标题】如何在 AJAX 调用后创建的格式化 HTML 上调用 JQuery 操作？【英文标题】：How to call JQuery actions on formatted HTML created after AJAX call? 【发布时间】：2019-03-17 07:11:33 【问题描述】：我对 php 文件进行 AJAX 调用，然后在成功检索数据时创建格式化的 html。
//Function called after AJAX success
function createHTML(data)
for( var i = 0; i <= data.length; i++)
var label = $("<label>").addClass("checkbox-inline");
var input = $("<input>").attr("type", "checkbox");
input.attr("name", "date[]");
input.attr("class", "date");
input.attr("value", data[0]['date']);
label.append(input);
label.append("data[0]['date']");
$(".checkboxes").append(label);
$(".checkboxes").append("<br />");
生成的 HTML 将如下所示：
<div class="checkboxes">
<label class="checkbox-inline">
<input type="checkbox" name="date[]" class="date" value="2018-01-
01">2018-01-01
</label>
<br />
<label class="checkbox-inline">
<input type="checkbox" name="date[]" class="date" value="2018-01-
02">2018-01-02
</label>
<br />
</div>
我想要做的是在单击新创建的复选框之一后获取它的值，但每当我尝试这样做时，什么都没有发生。
这就是我想要调用的：
$(".date").on("click", function()
console.log(this.value);
);
是不是因为 HTML 是在 AJAX 调用之后创建的，所以不能使用“点击时”事件？
【问题讨论】：
您将不得不在新添加的元素上重新注册您的点击事件。确保不要将其双重应用到现有元素。 我觉得你需要检查一下CB是否被检查过，看看这个帖子：***.com/questions/7031226/… 您必须附加 '$(".date").on("click", function() console.log(this.value); );'在她的其他代码之后执行 createHTML() 函数。 顺便说一句，您有逻辑错误。当您应该使用 data.length-1 以便您不会抛出时，您正在使用 data.length 进行 for 循环，数组从 0 开始。您还应该使用 [i] 而不是 [0] 来循环所有项目。 【参考方案1】：-
for( var i = 0; i data.length; i++) ==> for( var i = 0; i data.length; i++)
input.attr("值", data[0]['date']); ==> input.attr("value", data[i]['date']);
label.append("数据[0]['date']"); ==> label.append(`$data[i]['date']`);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="checkboxes"></div>
<script type="text/javascript">
//Function called after AJAX success
function createHTML(data)
for (var i = 0; i < data.length; i++)
var label = $('<label>').addClass('checkbox-inline');
var input = $('<input>').attr('type', 'checkbox');
input.attr('name', 'date[]');
input.attr('class', 'date');
input.attr('value', data[i]['date']);
label.append(input);
label.append(`$data[i]['date']`);
$('.checkboxes').append(label);
$('.checkboxes').append('<br />');
$(".date").on("click", function()
console.log(this.value);
);
window.onload = setTimeout(createHTML(['date': '2018-01-01', 'date': '2018-01-02']), 1000)
</script>
</body>
</html>【讨论】：
格式化您的代码并解释为什么这是问题的答案。 格式化我的代码？它已经格式化了。我修复了原始代码的一些错误（或错字？）。然后我通过类选择器向这些新的动态创建的单选按钮添加一个单击处理程序，就在它们全部附加到容器之后，这是一个类名为“复选框”的 div 元素。无需使用委托事件处理程序。一般来说，使用委托事件处理程序是一种最佳实践。在这种情况下，我认为不是原因。 但我认为在帖子末尾重复图片没有任何价值。用一个句子开始你的帖子，解释 1,2,3 是你所做的更正。另请参阅here。 哦，最后两张图片证明我的代码是正确的。元素树和控制台日志都匹配原始请求。我的习惯是捕获运行结果并将其附加到代码中。如果有任何问题，我会删除它们。【参考方案2】：当一个元素被动态创建时，任何预定义的事件都不会附加到它上面。因此需要在父元素上注册事件监听器，如下所示。
$("body").on("click", '.date', function(event)
alert( $(event.currentTarget).attr('value'));
);
on 的第二个参数是您要触发事件的目标（动态创建的元素的类）。
【讨论】：
【参考方案3】：适合我。
你必须使用$('body')
$('body')实际上是通过标签名选择元素
$("#showcheckbox").click(function()
$("#opDiv").html('<input type="checkbox" name="date[]" class="date" value="2018-01-01"> 2018-01-01');
);
$("body").on("change", '.date', function()
alert(this.value);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="showcheckbox">Click me</span>
<br><br>
<div id = "opDiv"></div>【讨论】：
【参考方案4】：你可以把它当作
$("body").on("click", '.date', function()
console.log(this.value);
);
只要在 DOM 中创建，它就可以在 'date' 类上绑定点击函数。
【讨论】：
以上是关于如何在 AJAX 调用后创建的格式化 HTML 上调用 JQuery 操作？的主要内容，如果未能解决你的问题，请参考以下文章