Question

我正在尝试根据用户提供的数字添加输入框。在调用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;

            }

        }

    }

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

提前感谢您的帮助！

Answer 1

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

问题2：新创建的元素不会神奇地最终绑定到您在文档加载上定义的事件。您必须将事件处理程序绑定到未重新创建的最近父项（#workoutentrycontainer是自然选择），然后按.textbox

过滤它

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

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

Answer 2

不确定您是否在页面中重复调用addexercises，或仅在页面加载时调用。

如果只在pageload上调用它并在添加click处理程序之前调用它，那么所有这些都是对元素的精确绑定处理程序。

如果在页面加载后使用它，则需要将clcik处理程序委托给更高级别的html树或文档以便考虑将来的元素。

如果在运行代码时元素存在，事件只能直接绑定到元素。

$(document).ready(function () {

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

});

在javascript函数执行后jquery无法正常工作

2 个答案: