2015-07-21 51 views
2

我是新來的HTML/jQuery和我試圖找出如何創建可點擊文字jQuery的可點擊的文本

我與ID爲「inputFormBasic」一個div並有多個小區的多個行這些細胞內部是標籤。

我想讓這些標籤可點擊。這是我想到的,但我沒有從我正在工作的網站得到任何迴應。

$('#inputFormBasic').find('label').click(function() { 
    alert('You clicked a label!'); 
}); 

我也使用label.ui-state-active

我在做什麼錯試過嗎?

編輯:有很多代碼,我已經包含一個片段。

<div id="inputFormBasic"> 
<tr> 
    <td style="width:25px" align="left"><label>LABEL 1&nbsp;</label></td> 
</tr> 
<tr> 
    <td align="left"><label>LABEL2&nbsp;</label></td> 
</tr> 

<tr class="formSpacingRow"></tr> 
<tr> 
    <td align="left"><label>LABEL3&nbsp;</label></td> 
</tr> 
<tr> 
    <td align="left"><label>LABEL4&nbsp;</label></td> 
    <td align="left"><label>LABEL5&nbsp;</label></td> 
    <td align="left"><label>LABEL6&nbsp;</label></td> 
    <td align="left"><label>LABEL7&nbsp;</label></td> 
    <td align="left"><label>LABEL8&nbsp;</label></td> 
    <td align="left"><label>LABEL9&nbsp;</label></td> 
    <td align="left"><label>LABEL10&nbsp;</label></td> 
</tr> 

</div> 



<script> 

     $('#inputFormBasic').find('label').click(function() { 

      alert('you clicked a label'); 
     }); 

</script> 
+5

你檢查錯誤的瀏覽器控制檯?包括jQuery?代碼在DOM準備好後運行?此外,您的問題中的完整代碼示例將有所幫助,以便我們可以重現此問題。 – j08691

+0

通過點擊可以編輯嗎? – Varun

+1

只需檢查一下,你是否已將所有這些內容都放在一個Document ready調用中?可能有助於創建一個快速的JS小提琴。 – thecraighammond

回答

1

雖然你的代碼工作正常。但這裏有一些改進的提示;

使用.ready函數來確保它在每個東西加載後啓動。

另外你不需要在你的代碼片段中使用.find。您只需使用#inputFormBasic label作爲選擇器即可實現您的目標。

類似這樣;

$(document).ready(function(){ 
    $('#inputFormBasic label').click(function() { 
     alert('You clicked a label named ' + $(this).html() +'!'); 
    }); 
}); 

此外,請確保您在此片段之前包含您的jQuery。

這是jsfiddle working example

0

試試這個上面的代碼

的Html變化

<div id="inputFormBasic"> 
    <table> 
<tr> 
    <td style="width:25px" align="left"><label>LABEL 1&nbsp;</label></td> 
</tr> 
<tr> 
    <td align="left"><label>LABEL2&nbsp;</label></td> 
</tr> 

<tr class="formSpacingRow"></tr> 
<tr> 
    <td align="left"><label>LABEL3&nbsp;</label></td> 
</tr> 
<tr> 
    <td align="left"><label>LABEL4&nbsp;</label></td> 
    <td align="left"><label>LABEL5&nbsp;</label></td> 
    <td align="left"><label>LABEL6&nbsp;</label></td> 
    <td align="left"><label>LABEL7&nbsp;</label></td> 
    <td align="left"><label>LABEL8&nbsp;</label></td> 
    <td align="left"><label>LABEL9&nbsp;</label></td> 
    <td align="left"><label>LABEL10&nbsp;</label></td> 
</tr> 
</table> 
</div> 

腳本

$(function() { 
     $('#inputFormBasic').find('table tr:first-child').find("label").click(function() { 
      alert('you clicked a label');    
     }); 
    }); 

Js Fiddle demo