2011-06-16 31 views
1

我已經看到了幾個SO帖子,這顯然與我的問題有關,但他們似乎都沒有做我想做的事情。我可以使用JQuery代碼模擬超鏈接的點擊嗎?

我有一個嵌套的結構,以顯示在報告層次(業務單元和品牌):

<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()`會做我想要的東西,但這似乎並沒有在我的代碼工作,但確實如果我通過JS手動調用它控制檯在Chrome中。我懷疑它與我的代碼在事件綁定到頁面之前正在運行。

您能否協助?

感謝您的閱讀。

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

是的,你可以。 $(linkObject).click() – reporter 2011-06-16 11:30:57

+0

正如我在我的問題中提到的,.click()在我的頁面中不起作用。我認爲它是在事件被綁定之前調用它的東西(我已經把我的調用放在$(document).ready(...);;中的.trigger/.click),因爲如果我通過調用函數Chrome中的JS控制檯,它的工作原理與您所說的完全相同。百思不得其解。 – 5arx 2011-06-16 11:36:43

+1

我不知道.ABrand是,請給更多的標記 – ridcully 2011-06-16 11:41:58

回答

4

你可以使用觸發器:

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

是你想達到什麼樣的?

+0

它是,它通過JS控制檯工作,但不是如果我把$(document).ready(...)中的調用;請參閱我對原始問題的修訂。 – 5arx 2011-06-16 11:42:45

+0

也許你在實際綁定click()事件之前調用.trigger('click')?那麼命令.trigger('click')根本就不會被識別。 – ub1k 2011-06-16 12:48:30

+0

嘗試將觸發器置於setTimeout中,並檢查是否可以正常工作:http://www.w3schools.com/js/js_timing.asp – ub1k 2011-06-16 14:52:32

1

你的語法沒有問題:click()會觸發單擊元素。

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

更多標記要求正確回答你的問題,我會想,但如果你擔心的事情沒有得到及時迷上了看看live()delegate(),可外面document.ready使用。

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

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

visibilityillogling工程罰款通過實際點擊,如果我手動調用它在JS控制檯。所以我想它與在$(document).ready(...)運行點處未綁定的事件有關...?我試過把它放在$(document).load(...)但是沒有骰子:-( – 5arx 2011-06-16 12:13:37

0

如果您遇到問題定時綁定事件(即.click(function(){}))和事件觸發(即.click()),爲什麼不乾脆鏈上的兩個在一起嗎?

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

這樣一來,你肯定點擊觸發條件獲取點擊綁定後調用。

相關問題