Question

I’ve got a bit of a problem with a very simple JQuery bit of JQuery code – I’ve been troubleshooting it by:

1. Moving the JQuery code to the end of the document
2. Using google hosted JQuery and local hosted
3. Using the $(document).ready – and without
4. Simplifying it by taking out the PHP generated code, inserting it in a HTML document and trying it without the PHP
5. Inserting the code with firebug – note: This actually works perfectly

Here’s the JQuery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="text/javascript">
$(document).ready( function(){
    $('.del').click(function() {
        alert(this.id);
    });
});
</script>

Here’s the PHP code:

    while($row = mysql_fetch_array($reports)){
        echo '<tr><th>'.$row['title'].'</th>';
        echo '<td><a href="modify.php?site='.$row['id'].'">Modify</a></td>';
        echo '<td> <img class="del" id="'.$row['id'].'" src="../right_place.jpg" width="75" height="75"></td>';
        echo '<td><a href="../report.php?site='.$row['id'].'"><img src="../'.$row['thumb'].'" width="75" height="75"></a></td></tr>';
    }

Which generates this kind HTML:

            <tr>
                <th>Site 2</th>
                <td><a href="modify.php?site=2">Modify</a></td>
                <td><img class="del" id="2" src="../right_place.jpg" width="75" height="75"></td>
                <td><a href="../report.php?site=2"><img src="../placeholder.jpg" width="75" height="75"></a></td>
            </tr>

            <tr>
                <th>Site 1</th>
                <td><a href="modify.php?site=1">Modify</a></td>
                <td><img class="del" id="1" src="../right_place.jpg" width="75" height="75"></td>
                <td><a href="../report.php?site=1"><img src="../placeholder.jpg" width="75" height="75"></a></td>
            </tr>

I’ve currently tried it in Google Chrome and Internet Explorer. The most interesting aspect of this is that if I copy and paste the JQuery code in to firebug, it executes perfectly and there are no errors?! However when it is in the page it will not execute. (Hence one reason I tried putting the code at the bottom of the page!)

Note: The JQuery code is also simplified for debugging/testing purposes – in reality it will prompt the user for confirmation before making an AJAX call to a PHP script that performs a MySQL query.

Answer 1

Couple of things wrong here.

1). Don’t use numeric IDs. IDs must begin with a letter.

2). Your script tag is incorrect, using a language specifier instead of type specifier. It should read:

<script type="text/javascript">

Fix that and it should work.