CODEWITHSUNDEEP
javascriptjqueryhtml-table
Manoz
Manoz

Reputation: 6617

td onclick not working

I am working in MVC4 and using tables, When I set onclick on <td> element of table then related function is not working.

This is how I am doing-

 <tr>

      <td style="cursor:pointer" onclick="D();">
       #= DisplayName #</td>
      </tr>

jQuery function-

<script type="text/javascript">

                $(document).ready(function D() {
                    $('td').click(function (event) { loadPartially(event, '@Url.Contact_PartialView_Main()[email protected]') });
                    alert("aa");
                });
            </script>

When this didn't work I tried giving it an ID-

 <tr>

          <td style="cursor:pointer" id="Open">
           #= DisplayName #</td>
          </tr>

jQuery function for this-

<script type="text/javascript">

                    $(document).ready(function {
                        $('#Open').click(function (event) { loadPartially(event, '@Url.Contact_PartialView_Main()[email protected]') });
                        alert("aa");
                    });
                </script>

I am trying to get load partial event on click of this element of table.

But somehow it is not working. I am not sure if i can use onclick function on <td> element of table.

Upvotes: 1

Views: 41794

Answers (5)

Matthew Cox
Matthew Cox

Reputation: 13682

The issue here is that you are mixing an old school approach with a jquery one (admittidly, you are also mixing in syntax that simply won't work).

Here is how you would accomplish binding an onclick event absent jquery:

<script type="text/javascript">
    function D() {
       alert('omg!');
    }
</script>

...

<td onclick="D()">
</td>

Now if you want to use the jquery approach it would look like this:

<script type="text/javascript">
    $('#IdSelector').click(function() {
        alert('omg!');
    });
</script>

...

<td id="IdSelector">
</td>

With the jquery approach, you sacrifice an easy ability to immediately identify what will happen during the td's onclick for separation of concerns between the javascript logic and the presentation layer (html)

I prefer the jQuery approach as it doesn't have to be concerned with a few annoying syntactical issues you have to watch out for when performing inline javascript as well as being much more readable IMO.

EDIT:

Demo for jquery approach - http://jsfiddle.net/jSnAh/

Upvotes: 2

user1491819
user1491819

Reputation: 1830

onclick on a <td> is valid.

Put your alert as the first line of the function D() to ensure it is being called correctly.

Using FireFox, install the Web Developer toolbar and Firebug plugins. Press F12, click the console tab, then click the <td>. If there are any errors, you'll see them in the console tab.

Upvotes: 0

Esha Garg
Esha Garg

Reputation: 144

Firstly give a id or class to your td


<tr>

  <td style="cursor:pointer" id='PerformAction'>
   #= DisplayName #</td>
  </tr>


$(document).ready(function (){
$('#PerformAction').click(function (event) { 
    loadPartially(event, '@Url.Contact_PartialView_Main()[email protected]')
    alert("aa");
});
});

Upvotes: 0

KingKongFrog
KingKongFrog

Reputation: 14429

Change:

$(document).ready(function {

to

$(document).ready(function () {

Upvotes: 3

웃웃웃웃웃
웃웃웃웃웃

Reputation: 11984

$(document).ready(function(){//You have missed paranthesis of function()
     $('#Open').live('click',function(event) { 
             alert("aa");
             loadPartially(event, '@Url.Contact_PartialView_Main()[email protected]');
      });  
  });

Upvotes: 1

Related Questions