我可以使用JQuery代码模拟超链接的单击吗?

时间:2011-06-16 11:28:48

标签: javascript jquery javascript-events

我看过几个SO帖子显然与我的问题有关,但似乎没有一个像我想做的那样。

我有一个嵌套结构,用于在报告中显示层次结构(业务单位和品牌):

<tr class="BrandRow1">
    <td>

    </td>
</tr>
<tr class='BrandRow1 StoreRow1'>
...
</tr>
<tr class='BrandRow1 StoreRow2'>
...
</tr>

在此布局中,我使用A标记来显示/隐藏“子”内容(通过使用class属性。

在加载时,如果$('.StoreRow2').length小于4,我想显示所有'节点'。

我使用函数进行切换:

// Allow an item to toggle other items' visibility
$(".VisibilityToggle").click(function () {
    var ControlledClass = findClass($(this), "Toggles-");
    if (ControlledClass != "") {
        $("." + ControlledClass).toggle();
        var Text = $(this).attr("rel");
        if (Text != "") $(this).attr("rel", $(this).attr("rev")).attr("rev", Text).text(Text);
    }
    return false;
});

我想做的是通过从JS代码中调用它来触发'切换'打开。

我认为类似'$(“。VisibilityToggle”)。click()`会做我想要的但是这似乎不适用于我的代码,但确实如果我调用它通过Chrome中的JS控制台手动完成。我怀疑它是在事件绑定到页面之前运行我的代码。

你能帮忙吗?

感谢阅读。

E.g。标记

...
<tr class='BrandRow TRBrand_2'>
    <td class="Level0">
        <p>
            <a id="DesktopApp0_ctl00_rptReportBrand_ctl01_A_Brand" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-BrandId_2">+</a> &nbsp;<strong>Brand2</strong>
        </p>
    </td>
    <td>
        <p>
            34</p>
    </td>
    <td>
        <p>
            21</p>
    </td>
    <td>
        <p>
            22</p>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            0.0&#37;</p>
    </td>
    <td>
        <p>
            1
        </p>
    </td>
    <td>
        <p>
            34.0
        </p>
    </td>
</tr>
<tr class='SiteRow BrandId_2 TRStore_10'>
    <td class="Level1">
        <p>
            <a id="DesktopApp0_ctl00_rptReportBrand_ctl01_rptSites_ctl00_A_Site" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-TRSiteUser_10">+</a>&nbsp; <span class="Bold">BrandX - Store 10</span>
        </p>
    </td>
    <td>
        <p>
            14</p>
    </td>
    <td>
        <p>
            9</p>
    </td>
    <td>
        <p>
            8</p>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            0.0&#37;</p>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            0.0
        </p>
    </td>
</tr>
<tr class='UserRow TRStoreUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Clarke Kent
        </p>
    </td>
    <td>
        <p>
            3</p>
    </td>
    <td>
        <p>
            3</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span class=" d5_3">1</span><span class=" d5_3">2</span><span class=" d5_3">3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
<tr class='UserRow TRSiteUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Alexie Sayle
        </p>
    </td>
    <td>
        <p>
            2</p>
    </td>
    <td>
        <p>
            2</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span class=" d5_2">1</span><span class=" d5_2">2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
<tr class='UserRow TRSiteUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Anders Bottom
        </p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
<tr class='UserRow TRSiteUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Daniella Ecclescake
        </p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
<tr class='UserRow TRSiteUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Mark E Smith
        </p>
    </td>
    <td>
        <p>
            2</p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
<tr class='UserRow TRSiteUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Matthew Bannister
        </p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td>
        <p>
            1</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
<tr class='UserRow TRSiteUser_10'>
    <td class="Level2">
        <p>
            <img src="/img/icons/spacer.png" alt=" " />
            &nbsp;Raj Patel
        </p>
    </td>
    <td>
        <p>
            3</p>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td colspan="3" class="Drive5Graphic">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
    </td>
    <td>
        <p>
            0</p>
    </td>
    <td>
        <p>
            &#8734;</p>
    </td>
</tr>
...

3 个答案:

答案 0 :(得分:4)

你可以使用触发器:

$(".ABrand").trigger('click');

这是你想要达到的目标吗?

答案 1 :(得分:1)

您的语法没有任何问题:click()会触发元素点击。

$('.ABrand').click();

需要更多标记才能正确回答我的想法,但请查看live()delegate(),如果您担心的话,可以在document.ready之外使用没有及时搞定。

$(".VisibilityToggle").live("click", function() { ... } );

$("#Container").delegate(".VisibilityToggle", click", function() { ... } );

答案 2 :(得分:0)

如果您在计算事件绑定(即.click(function(){}))和事件触发器(即.click())时遇到问题,为什么不将两者连接在一起?

$('.ABrand').click(function() {
    // do 3 flips, 5 somersaults and a pirouette
}).click();

这样,您就确定点击绑定后点击触发器会被调用。