2013-06-06 4 views
2

데이터베이스 결과 표가 있는데 사용자가 테이블 행을 클릭하여 올바른 레코드로 가져올 수 있도록 다음 JavaScript가 있습니다. 각 테이블 행에서 제외하고, 좋은 작품JavaScript 문제 표

var pathName = window.location.pathname; 

$('table tr').click(function(event) { 
    var modelId = $('section').attr('data-id'); 
    var dataType = $(this).attr('data-type'); 
    var id = $(this).attr('data-id'); 

    if(pathName === '/accounts/' + modelId) { 
     if(dataType === 'contact') { 
      pathName = '/contacts'; 
     } else if(dataType === 'note') { 
      pathName = '/notes'; 
     } else if(dataType === 'opportunity') { 
      pathName = '/opportunities'; 
     } 
    } else if(pathName === '/contacts/' + modelId) { 
     if(dataType === 'note') { 
      pathName = '/notes'; 
     } else if(dataType === 'opportunity') { 
      pathName = '/opportunities'; 
     } 
    } else if(pathName === '/events/' + modelId) { 
     pathName = '/delegates'; 
    } 

    var showUrl = pathName + '/' + id; 

    if(id === undefined) { 
     event.preventDefault(); 
    } else { 
     window.location = showUrl; 
    } 
}); 

, 나는 팝업을 불러 클릭 한 기록을 삭제하는 버튼과 양식을 가지고있다. 불행히도 이제 테이블 행을 클릭하여 올바른 레코드로 가져갈 수 있기 때문에 삭제 버튼을 클릭하면 팝업을 표시하려고 시도하지만 레코드 표시보기로 신속하게 리디렉션됩니다.

나는 이것이 CSS로 고정 될 수 있다고 생각하지만 위치를 시도해 보았다 : relative; z- 색인 생성은 아무 소용이 없습니다.

누구나 올바른 방향으로 나를 가리킬 수 있습니까?

+0

'.attr ('data-id')를 사용하면 데이터 속성의 이점 중 하나를 이용하지 않을 것입니다. '.data ('id')'를 사용하는 것이 더 효율적입니다. –

+0

무슨 뜻인지 확실치 않습니다. I ' m 요소의 id (이름) 다음에 없습니다. PHP를 사용하여 생성 된 레코드의 ID 뒤에 있습니다. #id는 완전히 다릅니다. –

+0

예,'# id '는 완전히 다릅니다. 데이터 속성을 읽을 필요가있는 것 같습니다. '.data ('id')'는 id 속성과 아무 관련이 없습니다. 오히려 'data-id'속성으로 지정한 데이터 값을 검색합니다. 마찬가지로'.attr ('data-type') 대신'.data ('type')'을 사용해야합니다. 'data-'로 시작하는 애트리뷰트를 사용할 때마다이 값을 저장하는 html5의 특별한 기능을 사용하고 있으며,'.data()'메소드를 사용하여 액세스하는 것이 가장 좋다. 문서는 api.jquery.com/data/#data2를 참조하십시오. –

답변

1

click event for the form button에서이 코드를 작성하십시오.

e.stopPropagation(); 

이벤트가 부모에게 버블 링되는 것을 중지합니다.

+0

훌륭합니다. 완벽하게 작동했습니다. 나는이 기능을 알지 못했고, 매우 유용했다. 감사. –

+0

@ Gaz .. 다행스럽게도 :) –

0

버튼의 클릭 이벤트를 취소하여 테이블 행에 전달하지 않습니다.

0

당신은 버튼의 클릭에 전파를 중지해야 : 나는 보여주기 위해 작은 바이올린을 만들었습니다

element.click(function (e) { // 'element' would be your button/a/input 
    e.stopPropagation(); 

이 작동하는 방법 : http://jsfiddle.net/PVvfV/은.