gpt4 book ai didi

javascript - 如何处理动态元素中的事件?

转载 作者:行者123 更新时间:2023-12-02 23:27:44 24 4
gpt4 key购买 nike

我想创建一个动态调查问卷,动态加载下一个问题,但是当我加载第二个问题时,按钮next2的事件没有响应,就像没有事件一样。

我认为这是因为我使用 JavaScript 函数加载输入。我需要做什么才能让它发挥作用?

$(document).ready(function() {
var question2 = `
<form>
<input type="number" id="age" placeholder="age">
<input type="submit" id="next2">
</form>
`;
var question3 = `
<form>
<input type = "email" id="email" placeholder="email">
<input type="submit" id="next3">
</form>
`;

$('#next').click(function(e) {
e.preventDefault();
console.log(1);
$(".questions").html(question2);
});
$("#next2").click(function(e) {
e.preventDefault();
$(".questions").html(question3);
});
$("#next3").click(function() {
alert('Cool');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="questions">
<form>
<input type="text" id="name" placeholder="Name">
<button type="submit" value="Next" id="next">Next</button>
</form>
</div>

</html>

最佳答案

您应该使用$(document)。它是文档中任何点击事件的函数触发器。然后,您可以在内部使用 jquery on("click","#idname",somefunction),其中第二个参数指定要定位的特定元素。在这种情况下,体内的每个元素。

 $(document).on('click', '#next', function(e) {
e.preventDefault();
$(".questions").html(question2);
});

关于javascript - 如何处理动态元素中的事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56659192/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com