jQuery : XHTML 유효성을 유지하면서 HTML 요소에 이벤트 메타 데이터를 전달하는 방법

Question

많은 사람들이이 딜레마를 한 번에 접하게 될 것입니다.

나는 블록 레벨 및 인라인 레벨 요소가 여러 개있는 블록 레벨 HTML 요소를 가지고 있습니다.

<div id="ajax"> 
    <h2>Something</h2> 
    <div class="icon"></div> 
    <div class="clear"></div> 
    <div class="somethingelse"><h3>blah</h3></div> 
</div> 

는 단순히 #ajax에 클릭 (최상위 요소)에 jQuery를 아약스() 이벤트를 첨부 할,하지만 서버 측 스크립트에 몇 가지 매개 변수를 통해 전달해야합니다.

나 href="param=value&this=that" 같은 것을 추가 할 수 있습니다,하지만이 페이지의 무효를 렌더링 할 단순히 a#ajax로 div#ajax를 대체보고 있어요 한 가지 가능한 방법 : (<div>)를 모든 블록 수준 요소가 될 수 없습니다 내부 인라인 요소 (<a>)의

또 다른 가능한 방법은 div#ajax에 rel 속성을 추가하는 것입니다. 이는 XHTML 유효성 검사를 무시한다는 것을 의미합니다.

div2에 인라인 onclick 이벤트를 추가하고 싶지 않습니다. 조금 벗어났습니다 ... 또한 div#ajax의 모든 하위 항목을 예 : <span>은 중요한 피타가 될 것입니다.

어떻게 처리할까요?

감사합니다. 이것은 간단 어딘가 자바 스크립트에서 직접 매개 변수를 넣어

첫 번째 옵션 :

Answer 1

이있는 동안은 XHTML의 유효성을 유지, 또는 적어도 모든 브라우저에서 기능 전체 나머지 대해 이동하는 방법은 여러 가지가 있습니다.

<div id="ajax"> 
    <h2>Something</h2> 
    <div class="icon"></div> 
    <div class="clear"></div> 
    <div class="somethingelse"><h3>blah</h3></div> 
    <a class="params" href="page.htm?param=value&this=that"></a> 
</div> 

CSS 그것을 숨기기 : 스크립트에서이 작업을 수행 할 수없는 경우

---

둘째, 당신은 앵커를 사용할 수 있지만 안에 같이, 그것을 포장하지

을

.params { display: none; } 

그리고 jQuery를 그것을 사용 :

$("#ajax").click(function() { 
    $.ajax({ 
    url: $(this).find(".params").attr("href"); 
    success: function() { 
     //do something 
    } 
    }); 
}); 

---

세 번째로 HTML5 data attributes을 사용합니다. 엄격한 XHTML 유효성이 손상되지만 앞으로 갈 방법은 현재 브라우저에서 문제가되지 않습니다.

---

마지막 옵션은 (내가 생각할 수 있음)에 jQuery metadata plugin를 사용하거나 당신이 원하는 것을 저장.