jquery recognizing later inserted html

Question

Hello guys i have this script:

function getList(){
$.ajax({
   type: "POST",
   url: "listaPogovorki.php",
   success: function(msg){
   $("#listaPogovorki").html(msg);
 }});

}

getList();

with this i call this php script:

<table>
<col id="td1"/>
<col id="td2"/>
<col id="td3"/>
<col id="td4"/>
<tr>
<td >#ID</td>
<td >Pogovorka</td>
<td >Avtor</td>
<td >Izmeni</td>
</tr>
<?php $result = mysql_query("SELECT * FROM $table");

while($row = mysql_fetch_array($result))
  {
  ?>
  <tr>
  <td><?php echo $row['id'];?></td>
  <td><?php echo $row['pogovorka'];?></td>
  <td><?php echo $row['avtor'] ?></td>
  <td><img class="editImage" src="images/icon_pencil.png" width="16px" height="16px" alt="<?php echo $row['id'];?>"></td>
  </tr>
  <?php } 
  mysql_close($con);
  ?>

</table>

now the problem is that the script doesn't recognize the html returned from the php script so i can't make clicking on the images(from php script) to fire some code. For example if i make:

$(".editImage").click ....

it wont work.

How can i make this work?

zzzzBov · Accepted Answer · 2011-01-10 15:34:02Z

1

You want to use the live function:

$('.editImage').live('click', ....);

Or use another element as an event delegate.

answered Jan 10, 2011 at 15:34

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user466764 · Accepted Answer · 2011-01-10 15:39:52Z

1

The output is not recognised because the html you have returned is not part of the original dom before the script was called.

Have a look at bind or live with jquery

answered Jan 10, 2011 at 15:39

user466764

1,1567 silver badges7 bronze badges

Comments

Darin Dimitrov · Accepted Answer · 2011-01-10 15:32:45Z

0

You could place the $(".editImage").click inside the AJAX success callback after updating the DOM with the new HTML or use the .live() method:

$('.editImage').live('click', function() {
    ...
});

answered Jan 10, 2011 at 15:32

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Comments

Mike Robinson · Accepted Answer · 2011-01-10 15:47:12Z

0

This is what the .live function is for - it binds even to elements that don't exist yet.

$(".editImage").live("click", function() {});

http://api.jquery.com/live/

answered Jan 10, 2011 at 15:47

Mike Robinson

25.2k8 gold badges64 silver badges83 bronze badges

Collectives™ on Stack Overflow

jquery recognizing later inserted html

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related