执行javascript函数后jquery不工作_Javascript_Jquery_Html

执行javascript函数后jquery不工作

javascript jquery html

执行javascript函数后jquery不工作,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试根据用户提供的数字添加输入框。在调用addexercises（）之前，jquery函数工作正常，但在调用之后，它就不再工作了编辑：基本上，在addexercise（）执行之后，当我单击类“textbox”中的某个内容时，我的jquery函数不再工作。在执行addexercise（）之前，它工作正常。我不明白它为什么会断这是我的addworkout.js文件 $(document).ready(function () { $(".textbox").click (f

我正在尝试根据用户提供的数字添加输入框。在调用addexercises（）之前，jquery函数工作正常，但在调用之后，它就不再工作了

编辑：基本上，在addexercise（）执行之后，当我单击类“textbox”中的某个内容时，我的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;

            }

        }

    }

$（文档）.ready（函数（）{
$（“.textbox”）。单击（函数（）{
警报（“工作”）；
});
});
函数加法器练习（）{
var numexercise=document.getElementById（“numexercises”）；
var=0；
document.getElementById（“exercisesthiscomport”）.style.display=“无”；
if（parseInt（numexercise.value）&&parseInt（numexercise.value）<25&&totalexercise<25）{
totalexercise+=parseInt（numexercise.value）；
for（var i=0；i


和我的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>


在此处插入标题
{%extends“masterpage.html”%}
{%block content%}
有多少独特的练习
{%endblock%}

提前感谢您的帮助
 问题1:此文档。getElementById（“workoutentrycontainer”）。innerHTML=…
导致重新创建#workoutentrycontainer
的整个内容。所以，即使是那些附加了事件的输入，也会丢失它
问题2:新创建的元素不会神奇地绑定到文档加载时定义的事件。您必须将事件处理程序绑定到未被重新创建的最接近的父级（#workoutentrycontainer
是自然选择），然后通过.textbox
对其进行过滤
$("#workoutentrycontainer").on("click", ".textbox", function() {
   alert('working');
});

这也将解决问题1，但我仍然建议您使用jQuery方法而不是innerHTML
来附加新内容。这将避免不必要的DOM操作。
问题1:此文档。getElementById（“workoutentrycontainer”）。innerHTML=…
将导致重新创建\workoutentrycontainer
的整个内容。所以，即使是那些附加了事件的输入，也会丢失它
问题2:新创建的元素不会神奇地绑定到文档加载时定义的事件。您必须将事件处理程序绑定到未被重新创建的最接近的父级（#workoutentrycontainer
是自然选择），然后通过.textbox
对其进行过滤
$("#workoutentrycontainer").on("click", ".textbox", function() {
   alert('working');
});

这也将解决问题1，但我仍然建议您使用jQuery方法而不是innerHTML
来附加新内容。这将避免不必要的DOM操作。
不确定您是在页面中重复调用加法器操作，还是仅在页面加载时调用
若只在pageload上调用它，并且在添加click处理程序之前调用它，那个么将处理程序绑定到元素就可以了
如果它将在页面加载后使用，则需要将clcik处理程序委托给更高级别的html树或文档，以考虑将来的元素
如果代码运行时元素存在，则事件只能直接绑定到元素
$(document).ready(function () {

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

});

不确定您是在第页中重复调用加法器练习
，还是仅在第页加载时调用
若只在pageload上调用它，并且在添加click处理程序之前调用它，那个么将处理程序绑定到元素就可以了
如果它将在页面加载后使用，则需要将clcik处理程序委托给更高级别的html树或文档，以考虑将来的元素
如果代码运行时元素存在，则事件只能直接绑定到元素
$(document).ready(function () {

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

});

它不是已经在它之外了吗？它不是已经在它之外了吗？所以javascript中的+=会导致所有内容被覆盖吗？@Lilluda5你实际上是在说x.innerHTML=x.innerHTML+y
。新内容的一部分与以前完全相同并不重要。x
的所有子项都将从新HTML中删除并重新创建。谢谢。你的回答很有效，我感谢你的额外解释。javascript中的so+=会导致所有内容被覆盖吗？@Lilluda5你实际上是在说x.innerHTML=x.innerHTML+y
。新内容的一部分与以前完全相同并不重要。x
的所有子项都将从新HTML中删除并重新创建。谢谢。你的回答有效，我感谢你的额外解释。