Question

我是html / jQuery的新手，我正在试图弄清楚如何创建可点击的文字

我有一个带有id＆quot; inputFormBasic＆＃39;并且有多个行包含多个单元格，并且这些单元格内部是标签。

我想让这些标签可点击。以下是我提出的建议，但我没有从我正在处理的网站上得到任何回复。

$('#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>

Answer 1

虽然你的代码工作正常。但这里有一些改进的提示;

使用.ready函数确保在加载完所有内容后启动它。

此外，您不需要在代码段中使用.find。您只需使用#inputFormBasic label作为选择器即可实现目标。

像这样的东西;

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

还要确保在此代码段之前包含jQuery。

这是jsfiddle working example。

Answer 2

试试以上代码

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

jQuery可点击文本

2 个答案: