0

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

在此先感谢您的帮助！

4

2 回答 2

3

问题 1：这document.getElementById("workoutentrycontainer").innerHTML = ...会导致#workoutentrycontainer重新创建整个内容。因此，即使是那些附加了事件的输入，也会丢失它。

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

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

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

于 2012-06-24T23:41:33.327 回答
0

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

如果只在页面加载时调用它并且在添加点击处理程序之前调用它，那么所有的处理程序都可以很好地绑定到元素。

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

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

$(document).ready(function () {

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

});
于 2012-06-24T23:42:19.957 回答