자바 스크립트에서 호출 버튼

Question

JavaScript를 사용하고 있습니다. 이 스크립트를 수정하려면 도움이 필요합니다. 버튼의 고유 ID를 사용하여 아래의 버튼을 호출하기 위해 표 행을 클릭하면됩니다.

$(document).ready(function(){ 
     $(selector).click(); //selector = h:commandLink 
}); 


$(selector).find('tr').each(function(){ //selector = h:dataTable 
     $(this).click(function(){ 
       $(selector).trigger('click'); //selector = h:commandLink  
     }); 
}); 

<h:commandLink id="lnkHidden" action="#{bean.pageRedirect}" style="text-decoration:none; color:white; display:none"> 

</h:commandLink> 

이 문제를 해결하는 데 도움을 주시겠습니까?

<h:form id="form" > 
<!-- The sortable data table --> 
<h:dataTable id="dataTable" headerClass="columnHeader" value="#{bean.dataList}" binding="#{table}" var="item"> 
    <!-- Check box --> 
    <h:column> 
     <f:facet name="header"> 
      <h:selectBooleanCheckbox style="margin-left: 0px;" value="#{bean.value}" class="checkall" > 
       <f:ajax listener="#{bean.value}" render="@form" /> 
      </h:selectBooleanCheckbox> 
     </f:facet> 
     <h:selectBooleanCheckbox onclick="highlight(this);" value="#{bean.value" > 
      <!-- if the user deselects one row deselect the main checkbox --> 
      <f:ajax listener="#{bean.deselectMain}" render="@form" /> 
     </h:selectBooleanCheckbox> 
     <!-- Click on table code --> 
     <h:commandLink id="lnkHidden" action="#{bean.pageRedirect}" style="text-decoration:none; color:white; display:none"> 

     </h:commandLink> 
    </h:column> 
    <!-- Row number --> 
    <h:column> 
     <f:facet name="header"> 
      <h:outputText value="№" /> 
     </f:facet> 
     <h:outputText value="#{bean.value}" /> 
    </h:column> 
.......... 

</h:dataTable> 

이 웹 브라우저에 생성 된 코드의 일부입니다 : JSP의 사용으로

<tr class=""> 
<td> 
<input id="form:dataTable:1:j_idt17" type="checkbox" onclick="jsf.util.chain(this,event,'highlight(this);','mojarra.ab(this,event,\'valueChange\',0,\'@form\')')" name="form:dataTable:1:j_idt17"> 
<a id="form:dataTable:1:lnkHidden" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:1:lnkHidden':'form:dataTable:1:lnkHidden'},'');return false" style="text-decoration:none; color:white; display:none" href="#"></a> 
</td> 
<td>2</td> 
<td>35435</td> 

Answer 1

(또는 어떤 언어)

PS 이는 테이블의 코드 , id 속성은 요소를 대상으로 사용하려는 것이지만 복잡한 방식으로 생성하기 때문에 약간 까다 롭습니다. 당신이 테이블 행을 클릭 처리해야하기 때문에

, 당신은 이벤트를 바인딩하고이 같은 click 이벤트를 트리거 할 수이뿐만 아니라 $(document).ready 핸들러 내부로 할 필요가있다

$('table[id$="dataTable"]').find("tbody").on("click", "tr", function() { 
    $(this).find('a[id$="lnkHidden"]').trigger("click"); 
}); 

.

이벤트 핸들러 중 하나를 <table>에 바인딩합니다. <tr>을 클릭하면이 처리기가 실행되고 this은 특정 행을 참조합니다. 이를 통해 해당 행에 <a> (linkButton)이 포함되어 있으며 타겟팅하려는 id과 일치하고 click 이벤트가 발생합니다.

linkButton은 "속성"([name])과 "ends ends"($=) 선택자로되어 있습니다. 생성 된 모든 요소는 원래 id으로 끝나는 id을 가지고 있습니다 (더 많은 정보는 내부적으로 id의 시작 부분에 사용됩니다). 엔진이 생성하는 요소입니다.

나는 당신이 당신의 document.ready 핸들러에서 뭘하려고했는지 모르겠지만, 필요, 우리 타겟팅하는 모든 commandLinks에 대한 click 이벤트를 트리거하는 경우, 당신은 사용할 수 있습니다 : 그래서

$('a[id$="lnkHidden"]').trigger("click"); 

내가 사용하는 거라고 최종 코드는 다음과 같습니다 당신의 <tr>이 <h:commandLink> 다음 클릭 것이다 거품 업 이벤트 및 화재 내부에있는 경우

$(document).ready(function() { 
    $('table[id$="dataTable"]').find("tbody").on("click", "tr", function() { 
     $(this).find('a[id$="lnkHidden"]').trigger("click"); 
    }).on("click", 'a[id$="lnkHidden"]', function (e) { 
     e.stopPropagation(); 
    }); 
}); 

Answer 2

, 이벤트 버블 DOM 트리입니다.

<h:commandLink>이 <tr> 안에 있으면 선택 구문이 잘못되었습니다. 당신이 할 때 :이 <h:commandLink> 내부의 후손 <tr>을 찾기 위해 시도

$(selector).find('tr') 

.

하나의 큰 것은 코드가 그대로 테이블의 모든 단일 행에 이벤트 리스너를 연결한다는 것입니다. 자바 스크립트 이벤트가 터지는 것은 나쁜 관행입니다.

$('table').on('click', 'tr', function() { 
    $(this).find(selector).click(); 
}); 

이 <tr> 요소에 대한 클릭을 수신하는 모든 <table> 년대에 이벤트 처리기를 바인딩 : 당신이해야 할 것은 당신이 (selector)을 클릭하여 원하는 가정이 같은 귀하의 행 내부에 실제로있다.

Answer 3

당신은 당신이 각 행에 대한 클릭 이벤트를 등록해야하고 더 완전 할 수 있다면이 경우는, 대신에 당신이

$('table#dataTable').on('click', 'tr', function(){ 
    // here your code goes to click the button with ID lnkHidden 
    $('#lnkHidden').trigger('click'); 

    // after the update of your question 
    $(this).find('td:first a').trigger('click'); 
});