동적으로 생성 된 HTML 버튼

Question

에서 javascript를 실행할 수 없으므로 javascript/jquery에 새로운 것이므로 도움이 필요합니다. 여기에 문제가 있습니다. 버튼이 jquery 애니메이션을 실행하여 로그인 양식을 표시하는 페이지가 있습니다. (그냥 이전 장소의 html을 대체합니다) 로그인 양식에서 로그인 양식을 숨기는 버튼을 동적으로 만듭니다. , 그리고 원래의 HTML을 공개. 그러나이 단추는 .click 메서드로 호출 할 수 없으며 OnClick 특성도 작동하지 않습니다. 어떤 충고?

$(document).ready(function() { 
$("#login_button").click(function() { 
$("#menu").animate({height: "toggle"}, 500, function() { 
$("#menu").empty(); 
$("#menu").append('<button id="back_button"></button>'); 
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false}); 
}); 
}); 
}); 

다음 "back_button"을 수신하는 코드를 클릭

:

$(document).ready(function() { 
$("#back_button").click(function() { 
$("#menu").animate({height: "toggle"}, 500, function() { 
$("#menu").append(//Regular HTML); 
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false}); 
}); 
}); 
}); 

자바 스크립트가 요소를 실행할 수 없습니다 내 다른 자바 스크립트를 생성? 모든 의견이 훌륭합니다! 미리 감사드립니다!

Answer 1

변경에서 다시 buttom의에 대한 코드 :

$("#back_button").click(function() { 

동적 요소를 만들 때

$(document).on('click', "#back_button", function() { 

에, 당신은 jQuery의 .on() 기능을 사용해야합니다.

이벤트 처리기는 현재 선택된 요소에만 바인딩됩니다. 코드가 .on()을 호출 할 때 페이지에 이 있어야합니다. 요소가 있는지 그리고 선택할 수 있는지 확인하려면 페이지의 HTML 태그에있는 요소의 문서 준비 처리기 내에서 이벤트 바인딩을 수행하십시오. 새 HTML이 페이지에 삽입되는 경우 새 HTML이 인 페이지가 배치 된 후에 요소를 선택하고 이벤트 처리기를 연결하십시오.

Answer 2

로드시 클릭 핸들러를 추가하려고했지만 <button>이 아직 작성되지 않았습니다. 버튼이 생성 된 후 버튼을 만드는 동일한 코드에 click 함수를 추가합니다.

Answer 3

당신은 이벤트 위임을 필요로하는 뒤로 가기 버튼에 대한 자바 스크립트가 실행될 때, 실제 요소가 존재하지 않기 때문에이 발생하는됩니다

$(document).on('click', '#back_button', function() { 
    // do your stuff here 
}); 

http://api.jquery.com/on/

Answer 4

.

대신 .on을 사용하여 클릭 이벤트를 바인딩하십시오.

$(document).on("click", "#back_button", function() {});