gpt4 book ai didi

javascript - javascript函数执行后jquery不工作

转载 作者:行者123 更新时间:2023-11-28 21:00:29 24 4
gpt4 key购买 nike

我正在尝试根据用户提供的数字添加输入框。在调用我的 addexercises() 之前,jquery 函数工作正常,但是在调用之后它不再工作。

编辑:基本上,在 addexercise() 执行后,当我单击“文本框”类的某些内容时,我的 jquery 函数不再起作用。在 addexercise() 执行之前,它工作正常。我不明白为什么它会破裂。

这是我的 addworkout.js 文件

    $(document).ready(function () {

$(".textbox").click (function () {
alert('working');
});

});


function addexercises() {

var numexercise = document.getElementById("numexercises");
var totalexercise = 0 ;
document.getElementById("exercisesthisworkout").style.display = "none";
if (parseInt(numexercise.value) && parseInt(numexercise.value) < 25 && totalexercise < 25) {
totalexercise += parseInt(numexercise.value);
for ( var i = 0; i < parseInt(numexercise.value); i++) {

// alert("hello world");

var subcontainer = '<div class="exercisecontainer">';
var exercisename = '</br><input type="text" value="Enter Exercise Name" class="textbox" name="exercisename">';
var numsets = '<br><input type="text" value="Number of Sets" class="numsets" name="numsets">';
var endingdiv = "</div>";
subcontainer += exercisename;
subcontainer += numsets;
subcontainer += endingdiv;
document.getElementById("workoutentrycontainer").innerHTML += subcontainer;



//document.getElementById("workoutentrycontainer").innerHTML += exercisename;

//document.getElementById("workoutentrycontainer").innerHTML += numsets

//document.getElementById("workoutentrycontainer").innerHTML += endingdiv;

}

}

}

和我的 html 文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="/static/addworkout.css" type="text/css">
<script type="text/javascript" src="/static/jquery.js"> </script>
<script type="text/javascript" src="/static/addworkout.js"></script>



</head>
{% extends "masterpage.html" %}
{% block content %}
<body>

<div id="workoutentrycontainer">
<div id="exercisesthisworkout">
<p>How many unique exercises</p>
<input type="text" class="textbox" id="numexercises">
<input type="button" class="button" onclick="addexercises()" value="Add" id="numexercisesbutton">


</div>
</div>
</body>
{% endblock %}
</html>

预先感谢您的帮助!

最佳答案

问题 1:document.getElementById("workoutentrycontainer").innerHTML = ... 导致 #workoutentrycontainer 的全部内容被重新创建。因此,即使那些附加了事件的输入也会丢失它。

问题 2:新创建的元素不会神奇地最终绑定(bind)到您在文档加载时定义的事件。您必须将事件处理程序绑定(bind)到未重新创建的最接近的父级(#workoutentrycontainer 是自然选择),然后通过 .textbox

对其进行过滤
$("#workoutentrycontainer").on("click", ".textbox", function() {
alert('working');
});

这也将解决问题 1,但我仍然建议您使用 jQuery 方法而不是 innerHTML 来附加新内容。这将避免不必要的 DOM 操作。

关于javascript - javascript函数执行后jquery不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11181997/

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