라이브 바인딩 된 제출이 크롬 요소를 가리 키지 않습니다.

Question

다음 코드를 실행하면 상대 양식을 볼 것으로 예상되므로 정보를 추출 할 수 있습니다. 대신 this이 문서를 가리 킵니다.

라이브 바인딩을 사용하는 것과 관련 있다고 가정합니다. 해결 방법이 있습니까?

$('.form_one').add('.form_two').live('submit',function(e){ 
     e.preventDefault(); 
     console.log($(this)); 
    }) 

Answer 1

live() 가장 높은 수준의 DOM 요소에 이벤트 핸들러를 위임에 대한 바로 가기 때문이다 - document이 - 왜 this 점의 범위가있다.

해결 방법으로 이벤트를 발생시킨 요소를 얻으려면 $(e.target)을 사용해야합니다.

또한 live()은 더 이상 사용되지 않으며 jQuery 1.7 이상을 사용하는 경우 delegate() 또는 on()을 사용해야합니다.

Example fiddle

Answer 2

http://jsfiddle.net/ZBaWd/는 on 핸들러를 사용하는 방법을 보여줍니다.

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

var cont = $("#container"); 

// Note that I'm attaching it to container and not the forms themselves. 
// Then, as an additional parameter, I provide the selector "form" so that 
// `on` is only fired for "form" elements that "submit" and are children of "#container" 
$("#container").on("submit", "form", function(e){ 
    e.preventDefault(); 
    console.log($(this)); 
}); 


$("<form>").addClass("form_one").append("<button type='submit'>Submit 1</button>").appendTo(cont); 
$("<form>").addClass("form_two").append("<button type='submit'>Submit 2</button>").appendTo(cont);