调用按钮从JavaScript

Call button from JavaScript

本文关键字：JavaScript 按钮 调用      更新时间：2023-09-26

我是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>
你能帮我解决这个问题吗?

p。年代这是表的代码:

<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>

这是生成到web浏览器的代码的一部分:

<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>

使用JSP(或任何语言)时，您希望使用id属性来定位元素，但是这有点棘手，因为它以一种复杂的方式生成它们。

由于需要处理单击表行，因此可以绑定事件并触发click事件，如下所示:

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

这也需要在$(document).ready处理程序中。

这将绑定一个click事件处理程序到<table>。当单击<tr>时，该处理程序运行，并且this引用特定的行。这样，我就找到了包含在该行中的<a> (linkButton)，以及您所针对的特定id，并触发其click事件。

我找到linkButton的方式是使用"属性"([name])和"以"结束($=)选择器。所有生成的元素都有一个以原始id集结尾的id(内部使用的更多信息，在id的开头)…这只是引擎产生它们的方式。

我不确定你在document.ready处理程序中想做什么，但如果需要触发我们所针对的所有命令链接的click事件，你可以使用:

$('a[id$="lnkHidden"]').trigger("click");
所以我要用的最后一个代码是: 
$(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();
    });
});

由于事件是冒泡的DOM树，如果你的<tr>在你的<h:commandLink>内部，那么点击事件将冒泡并触发

如果您的<h:commandLink>在<tr>中，那么您的选择语法是错误的。当你这样做的时候:

$(selector).find('tr')

这是试图在<h:commandLink>中找到<tr>的后代。

一个重要的事情是，您的代码是在表中的每一行附加事件侦听器。这是不好的做法，因为JavaScript事件会冒泡。你应该做的是这样的假设你想要点击的(selector)实际上是在你的行:

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

这将绑定一个事件处理程序到所有的<table>来监听<tr>元素的点击。

你说的是when I click on a table row这意味着你需要为每一行注册一个点击事件在这种情况下你不需要使用each，相反你可以使用

$('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');
});
相关文章：