JQuery 변경 내용

Question

JQuery에서 div 태그의 내용을 변경하여 사용자가 여러 페이지를 통과하는 것처럼 보이게하려고합니다. 내가 가지고있는 방식은 사용자가 단추를 누르면 단추를 누르는 스크립트가 실행되고 div의 내용을 변경하는 것입니다. 이런 식으로 적어도 세 페이지를 갖고 싶었지만 두 번째 페이지 이후에 문제가 생겼습니다. 여기 내가 스크립트에있는 것입니다 : 나는 '1'의 ID로, 첫 페이지에 버튼을 클릭하면

는

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$("#1").click(function() { 
$("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
$("#rightPart").html(''); 
}); 

$("#2").click(function() { 
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 
}); 

그래서, 그것은 두 번째 페이지가 표시되어야 무엇을 화면을 변경합니다. 두 번째 페이지는 몇 가지 물건을 표시하고 '2'라는 ID로 다른 버튼을 만듭니다. 그런 다음 두 번째 페이지에서 '2'라는 ID로 버튼을 클릭하면 아무 것도하지 않습니다. 어떤 도움이 필요합니까? 버튼이 실제로 html에 있지 않고 스크립트로 생성 되었기 때문입니까?

Answer 1

id가 "2"인 버튼이 클릭 이벤트에 바인딩 된 이후에 생성 되었기 때문에이 새로운 버튼은 det가 아닙니다. 클릭 이벤트를 재 바인드하지 않는 한 영향을받습니다. 더 나은 옵션은 click() 대신 on()을 사용하는 것입니다.이 작업은 자동으로 수행됩니다.

$(document).ready(function() { 

    $("#1").on('click', function() { 
     $("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
     $("#rightPart").html(''); 
    }); 

    $("#2").on('click', function() { 
     $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
    }); 

}); 

Answer 2

예. 이는 이벤트가 웹 페이지에 첨부 될 때 '2'버튼이 DOM에 없기 때문입니다. 당신이 더 많은 것을 위해 jQuery를

또한 참조 할 수 있습니다 'Event binding on dynamically created elements?'의 이전 버전을 사용하는 경우

• .live(events, handler(eventObject))
• .on(events [, selector] [, data] , handler(eventObject))
• 이상을 사용

  봅니다 위임합니다.

Answer 3

동적으로 생성 되었기 때문에 적합합니다.

$("#2").click(function() { 
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 
}); 

$("#leftPart").on("click","#2",function() { 
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input   type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 

지금 아이디 2 leftPart와 미래의 모든 요소가있을 것이라는 점을 보장한다 : 당신은이 문제를

변화 당신에게 코드를 방지하기 위해 .on을 사용할 수 있습니다 위 이벤트 핸들러

Answer 4

버튼을 동적으로 생성하기 때문입니다. 클릭 이벤트를 위임하려면 .on()을 사용해야합니다. #2 버튼이 준비되지 않았기 때문에 버튼이 생성되지 않아 작동하지 않습니다. 'body'는 선택된 버튼의 부모 요소로 대체 ​​될 수 있습니다. 그들이이

$("#2").click(function() { 
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 

에

$(document).on('click',"#2",function() { 
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 

숫자 값이 유효하지 않습니다 아이디의입니다

$('body').on('click','#2',function(){ 

Answer 5

변화에 유효하지 않은 것처럼 또한이 ID 년대와 같은 번호를 사용하지 않아야 유효한 ID를 사용 .