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も修正されますが、innerHTML新しいコンテンツを追加する代わりにjQueryメソッドを使用することをお勧めします。これにより、不要な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 に答える