Geek asks and answers

JQuery not executing, but loading?

I have a little problem with a very simple jQuery bit of jQuery code - I was looking for it:

  • Moving jQuery code to the end of a document
  • Using Google-hosted jQuery and local hosting
  • Using $ (document) .ready - and without
  • By simplifying this, ripping out the PHP code, pasting it into an HTML document and trying it without PHP
  • Inserting code with firebug - note: This really works great

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>';
    }

What generates this kind of 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>

Google Chrome Internet Explorer. , JQuery firebug, ?! , , . (, , !)

. JQuery / - AJAX PHP script, MySQL.

+3
4

.

1). . .

2). script , . :

<script type="text/javascript">

, .

+4

= "text/javascript",

+1

Try changing the readiness function of your document:

$(document).ready( function(){
    $('.del').live('click', function() {
        alert(this.id);
    });
});
0
source

I would use the delegate () method : 

$(function() {

    $("img").delegate(".del", "click", function() {
        alert(this.id);
    });

});
0
source

More articles:


All Articles