开发者

Can I simulate a click on a hyperlink with jQuery code?

I have seen a couple of Stack Overflow posts which apparently relate to my question but none of them seem to do what I want.

I have a nested structure to display hierarchies (business units and brands) in a report:

<tr class="BrandRow1">
    <td>

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

and within this layout I use A tags to show/hide the 'child' content (by making use of the class attributes.

On load, I want to show all the 'nodes' if $('.StoreRow2').length is less than say 4.

I use a function to do the toggling:

// 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;
});

and what I'd like to do is trigger the 'toggling' open by calling this from JS code.

I thought something like '$(".VisibilityToggle").click()` would do what I want but this doesn't seem to work in my code, but does if I call it manually via the JS console in Chrome. I suspect its to do with my code running before the events have been bound to the page.

Can you please assist?

E.g. Markup

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


you could use trigger:

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

Is that what you wanted to achieve?


There's nothing wrong with the syntax you have: click() will trigger a click on the element.

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

More markup is required to properly answer your question I would think, but take a look at live() and delegate(), which can be used outside document.ready if you're worried that things aren't getting hooked up in time.

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

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


If you're having trouble timing the event bind (i.e. the .click(function(){})) and the event trigger (i.e. the .click()), why not just chain the two together?

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

This way, you're sure the click trigger gets called after the click bind.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜