jQuery ajax 반환 요소를 선택할 수 없습니다.

Question

ajax 생성 선택기에 문제가 있습니다.

기본적으로 기본적으로 시작 버튼이 있습니다. onclick, 무언가를 시작한 다음 클릭하면 결과가있는 ajax 호출에서 새 div가 반환됩니다. 이 중 하나는 중지 버튼입니다. 메인 페이지에서 내 연결 스크립트는 앵커를 인쇄 리턴 콜 그것 자체에서 나는 스크립트 인라인을 넣으면이 정지 버튼

<a id="stop">stop</a> 

에 부착 된 클릭 이벤트를 가지고, 내가

에 액세스 할 수 있습니다

$('#stop').click(function() { }); 

그러나 스크립트를 원하지 않습니다 (페이지 당 여러 항목이 있고 링크 된 주요 리소스에 더 많은 정보가 있으므로). 이 호출이 주 페이지의 연결된 시트에 있으면 아무 일도 일어나지 않습니다.

왜 이런가요?

반환 요소를 처리하는 데 사용해야하는 또 다른 '문서 준비'래퍼가 있습니까?

Answer 1

경우 당신은하고 싶지 :

$('#container').on('click', '#stop', function() { console.log('test'); }); 

이 또는 당신이 뭔가를 할 수

$('#stop').live('click', function(){ console.log('test'); }); 

그러나 사용하려고 할 때마다 live이 오버 헤드를 추가하기 때문에 페이지에서 많은 이벤트를 처리해야하는 경우에는 권장하지 않습니다.

Answer 2

요소가 존재하기 전에 주 스크립트가 이벤트를 새 요소에 추가하지 않습니다.

은 메인 스크립트에서 함수를 만드는 작업을하고 이벤트를 추가 할 때 단순히 기능을 지정합니다 -

-

주요 스크립트 다음

var your_function = function() { 
    // your code 
} 

당신이 사업부를 추가 할 때

$('#stop').click(your_function()); 

더 좋은 해결책은 부모에게 이벤트를 추가하고 거품이 날 때 처리하는 Brad M의 제안입니다.

<div id="container"></div> 

당신이에 ajax 호출의 결과를 추가하고있는 요소

가

Answer 3

아약스를 통해 추가 된 요소에 대해 생성 한 클릭 이벤트가 발생하지 않는다는 점을 이해했습니다. 요소의 click 이벤트에 핸들러를 연결하면 현재 DOM에있는 요소에 대해서만 발생합니다. 원하는 행동을 취할 수있는 몇 가지 옵션이 있습니다.

1) 비효율적 인 "라이브"처리기를 사용하십시오.(일반적으로 밀리 초 단위로 측정 한 비효율)

$('#stop').live('click', function(){}); 

2) 요소가 DOM에 삽입 된 후 이벤트 핸들러를 다시 연결합니다. 이 버튼을 클릭하면, 이벤트가 "거품"가이 이벤트를 트리거하도록

$.ajax({ 
    complete: function(){ 
     $('#idOfTheElementsYouJustInserted').click(function(){}); 
    } 
}); 

3), 정적 부모 요소에 이벤트 핸들러를 첨부. 버블을 생성 한 요소를 참조하려면 event.target을 사용할 수 있습니다. 여기서 event는 함수에 전달되는 기본 매개 변수입니다.

$('#staticParentElement').click(function(event) { var elementClicked = event.target; });