[JQUERY] 브라우저의 메모리 사용량 비교 : 인라인 온 클릭) (JQuery와 .bind 사용하여 대

브라우저의 메모리 사용량 비교 : 인라인 온 클릭) (JQuery와 .bind 사용하여 대

해결법

1. ---

   1.일부 컨테이너 개체와 일반 솔루션,하지만 한 번 더 방법을 제안 할 수있는 jqGrid I에 대한 솔루션뿐만 아니라 필요하기 때문에.

   일부 컨테이너 개체와 일반 솔루션,하지만 한 번 더 방법을 제안 할 수있는 jqGrid I에 대한 솔루션뿐만 아니라 필요하기 때문에.

   문제는있는 jqGrid 일부 onclick을 바인딩 이미 만들 것입니다. 더 많은 자원을 소비하지 않습니다 그래서 그냥있는 jqGrid 이벤트 처리기에서 기존 사용하는 경우. 두 이벤트 핸들러는 당신을 위해 유용 할 수 있습니다 : onCellSelect 및 beforeSelectRow. 당신은 당신이 beforeSelectRow 이벤트를 사용하는 것이 좋습니다 무슨에 주로 가까운 동작을합니다. 그것은의 장점은 사용자가 사용자 정의 버튼 하나를 클릭 할 경우 행 선택이 변경있을 수 있다는 것입니다. onCellSelect있는 행이 먼저 선택 될 다음 onCellSelect 이벤트 처리기가 호출.

   다음과 같이 당신은 버튼으로 열을 정의 할 수 있습니다

   { name: 'add', width: 18, sortable: false, search: false,
     formatter:function(){
         return "<span class='ui-icon ui-icon-plus'></span>"
     }}
   

   코드에서 내가있는 jqGrid의 포맷터 사용 사용자 정의 할 수 있지만, 바인딩 어떤 이벤트가없는 이상. 의 코드

   beforeSelectRow: function (rowid, e) {
       var iCol = $.jgrid.getCellIndex(e.target);
       if (iCol >= firstButtonColumnIndex) {
           alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
       }
   
       // prevent row selection if one click on the button
       return (iCol >= firstButtonColumnIndex)? false: true;
   }
   

   여기서 firstButtonColumnIndex = 8 buttonNames = {8 : 9 '추가': '편집', 10 '제거', 11 '세부 사항'}. 코드에서는 해당 함수 호출에 경고를 대체 할 수 있습니다.

   당신이 버튼을 항상 행을 선택하려면 다음까지의 코드를 단순화 할 수 있습니다 클릭

   onCellSelect: function (rowid,iCol/*,cellcontent,e*/) {
       if (iCol >= firstButtonColumnIndex) {
           alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
       }
   }
   

   길에서 당신은 전체 테이블에 바인딩 한 기존의 클릭 이벤트 핸들러를 사용 (소스 코드 참조) 당신이 사용하려는 처리있는 jqGrid를 말한다.

   난 당신이 또한 항상있는 gridview 사용하는 것이 좋습니다 :있는 jqGrid의 건물까지 어떤 속도 사실,하지만 당신은 옵션으로 사용하는 것으로 간주 afterInsertRow 기능을 사용하는 경우 이는 사용할 수 없습니다.

   여기 데모를 볼 수 있습니다.

   업데이트 : '행동'대답을 준비 데모를 참조하십시오 당신이 가진 또 하나의 옵션이 포맷터 사용하는 것입니다. 당신이 '행동'포맷의 코드를 보면 당신은 이벤트 바인딩 측면에서 보면 작업은 대부분 현재의 코드와 같습니다.

   2 업데이트 : 당신이 여기에서 볼 수있는 코드의 업데이트 된 버전.

2. ---

   2.당신은 모든 버튼의 부모 요소에, jQuery를 통해 모든 요소에 대해 하나의 클릭 핸들러를 바인딩 .delegate () 메소드를 사용한다.

   당신은 모든 버튼의 부모 요소에, jQuery를 통해 모든 요소에 대해 하나의 클릭 핸들러를 바인딩 .delegate () 메소드를 사용한다.

   다른 매개 변수의 각 요소에 데이터 - 속성을 사용할 수 있습니다, 그리고 .DATA () 메소드를 검색 할 수 있습니다.

3. ---

   3.당신은 () 대리자를 사용하여 생각 해 봤나? 당신은 컨테이너 요소보다는 수백 하나 핸들러이있을 것이다. 이 같은:

   당신은 () 대리자를 사용하여 생각 해 봤나? 당신은 컨테이너 요소보다는 수백 하나 핸들러이있을 것이다. 이 같은:

   $('#container').delegate('.your_buttons','click',function(e){
     e.preventDefault();
     var your_param = $(this).data('something'); // store your params in data, perhaps
     do_something_with( your_param );
   });
   

   이 같은 일반적인 레이아웃을 가정 :

   <div id="container">
     <!--- stuff here --->
     <a class="your_buttons" href="#" data-something="foo">Alpha</a>
     <a class="your_buttons" href="#" data-something="bar">Beta</a>
     <a class="your_buttons" href="#" data-something="baz">Gamma</a>
     <a class="something-else" href="#" data-something="baz">Omega</a>
     <!--- hundreds more --->
   </div>
   

from https://stackoverflow.com/questions/5303471/browser-memory-usage-comparison-inline-onclick-vs-using-jquery-bind by cc-by-sa and MIT license