javascript 함수가 실행 된 후 jquery가 작동하지 않습니다.

사용자가 제공 한 번호를 기반으로 입력 상자를 추가하려고합니다. 내 addexercises()가 호출되기 전에 jquery 함수는 제대로 작동하지만 호출 된 후에는 더 이상 작동하지 않습니다.javascript 함수가 실행 된 후 jquery가 작동하지 않습니다.

EDIT : 기본적으로 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>

감사를 사전에 도움을!

출처

2012-06-24 Lilluda 5

은 그것의 외부 이미 아닌가요? –

문제 1 :이 document.getElementById("workoutentrycontainer").innerHTML = ...은 #workoutentrycontainer의 전체 콘텐츠를 재생성하고 있습니다. 따라서 이벤트가 첨부 된 입력이라도 잃게됩니다.

문제점 2 : 새로 작성한 요소가 마술처럼 문서로드시 정의한 이벤트에 바인딩되지 않습니다. 당신은 다시 (#workoutentrycontainer 자연 선택되는) 한 후이 너무 문제 하나가 해결됩니다 .textbox

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

하여 필터링되지 않는 가장 가까운 부모에 이벤트 처리기를 바인딩해야하지만, 난 여전히 당신이 jQuery를 방법을 사용하는 것이 좋습니다 대신 새 콘텐츠를 추가하려면 innerHTML 대신 이렇게하면 불필요한 DOM 조작을 피할 수 있습니다.

출처

2012-06-24 23:41:33

그래서 자바 스크립트에서 + = 모든 것을 덮어 씁니까? –

@ Lilluda5 사실''x.innerHTML = x.innerHTML + y' '라고 말하고 있습니다. 새 콘텐츠의 일부가 이전과 똑같은 것은 중요하지 않습니다. 'x'의 모든 아이들은 새로운 HTML에서 지워지고 다시 만들어 질 것입니다. –

감사합니다. 귀하의 답변은 효과가 있었고 추가 설명에 감사드립니다. –

반복적으로, 또는 단지 pageload 페이지에서 addexercises를 호출하는 경우 확실하지.

pageload에서만 호출하고 클릭 핸들러를 추가하기 전에 호출하는 경우 모두 요소에 대한 바인딩 핸들러가 좋습니다. 이 페이지로드 후에 사용되는 경우

, 당신은 미래의 요소를 설명하기 위해 HTML 트리 나 문서의 높은 수준에 clcik 핸들러를 위임 할 필요가있다. 코드가 실행될 때 요소가 존재하는 경우

이벤트 만, 요소 diretly 바인딩 할 수 있습니다.

$(document).ready(function() { 

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

});

출처

2012-06-24 23:42:19 charlietfl

javascript 함수가 실행 된 후 jquery가 작동하지 않습니다.

답변

관련 문제