CODEWITHSUNDEEP
jquery
Jon Leach
Jon Leach

Reputation: 871

jquery td click event

I'm trying to fire a click event via jquery on td cells on a table. I have it implemented for rows in a different table without any problems. For reference, the table is a montly calendar and clicking on a square will pull up data for that day.

I could not get the event to fire so I stripped the code down to the basics and put it on its own page to ensure that nothing is interfering. The table class in css is table.calendar and here's the code:

 $('table.calendar').delegate('td','click',function () {
        alert('Success');
        var href = $(this).find("a").attr("href");
        if (href) {
            window.location = href;
        }
    });

I've also tried it as .calendar without success. I've confirmed that the class is correct on the table and there are no other classes. I'm using jquery 1.6.

Any idea why the event is not firing?

Upvotes: 0

Views: 3521

Answers (2)

Jon Leach
Jon Leach

Reputation: 871

Here's the raw code. Note that I'm using VS2010 so some of the code is coming from there.

<form method="post" action="WebForm1.aspx" id="form1">
// 
<script type="text/javascript">



    jQuery(function ($) {

        $('table.calendar').delegate('td', 'click', function () {

            alert('Success');

            var href = $(this).find("a").attr("href");

            if (href) {

                window.location = href;

            }

        });

    });


<div>

<table id="tblCalendar" class="calendar" rules="all" border="1" style="width:70%;float:right;border-width:2px;border-color:Gray">

<tr style="border-width:2px;border-style:solid;">

    <th><a id="LinkBack" href="javascript:__doPostBack(&#39;LinkBack&#39;,&#39;&#39;)" style="font-size:Large;"><<</a></th><th align="center" colspan="1"><span id="CalendarTitle" style="font-size:Large;"></span></th><th align="center"><a id="LinkForward" href="javascript:__doPostBack(&#39;LinkForward&#39;,&#39;&#39;)" style="font-size:Large;">>></a></th>

</tr><tr>

    <td class="Regular">3</td><td>4</td><td>5</td>

</tr>


</div>

</form>

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47099

try wrapping your code in a ready callback:

jQuery(function($) {
    $('table.calendar').delegate('td','click',function () {
            alert('Success');
            var href = $(this).find("a").attr("href");
            if (href) {
                window.location = href;
            }
        });
});

If this dosn't work there is a big posibility that your table.calender is added async. Then try:

$(document).deligate('table.calendar td', 'click', function() {
    alert("Success!");
});

OR

$("table.calendar td").live('click', function() {
    alert("Success!");
});

If this dosn't work you dont have any table with class calender containing any td.

Upvotes: 1

Related Questions