CODEWITHSUNDEEP
jqueryhtml
cb92
cb92

Reputation: 21

jQuery clickable text

I'm new to html/jQuery and I'm trying to figure out how to create clickable text

I have a div with the id 'inputFormBasic' and there are multiple rows with multiple cells and inside those cells are labels.

I want to make these labels clickable. Here is what I've come up with but I don't get any response from the website I'm working on.

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

I've also tried using label.ui-state-active

What am I doing wrong?

Edit: There is a lot of code, I've included a snippet.

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

Upvotes: 2

Views: 1313

Answers (2)

Prasad Raja
Prasad Raja

Reputation: 703

Try this above code

Html Changes

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

Script

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

Js Fiddle demo

Upvotes: 0

Mohammad Mursaleen
Mohammad Mursaleen

Reputation: 603

Although your code is working fine. But here are some tips for improvement;

Use .ready function to make sure it initiates after every thing is loaded.

Also you don't need to use .find in your snippet. You can achieve your goal simply using #inputFormBasic label as selector.

Something like this; 

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

Also make sure you include your jQuery before this snippet.

Here is jsfiddle working example.

Upvotes: 1

Related Questions