Home/ Questions/Q 7827151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T09:44:20+00:00

Basically, I tried to code the following. (note that I am a newbie in

  • 0

Basically, I tried to code the following. (note that I am a newbie in jQuery, trying to learn.)

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<style>
    img.box:hover { opacity: 0.4; }
</style>

<script type="text/javascript">
jQuery(document).ready(function() 
{
  $(".box").click(function(event){
      $.post("./itemdrop.php", { id: "Item:1" }, function(data){
            $('#box').append(data);
         }
      );
  });

  $("li").click(function(event){
     $(".box").append("clicked");

  })
});
</script>
</head>

<body>

<div id="box">
    <img class="box" src="./img/box.jpg" width="150" height="150">
</div>

</body>
</html>

It should work like this:

  1. User clicks on “box” image, jQuery gets values from itemdrop.php

The returned value is <li class="item">Shield of Walmar</li>

However, the jQuery doesn’t act when I click on Shield of Walmar. (I somehow have a feeling that the document ready function at top causes it.)

How can I solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use live events/delegates. Since you are using a recent jQuery version, you want to use .on() for it:

    $('#box').on('click', 'li', function(event){
     $("#box").append("clicked");
});

    I’d also suggest you to replace jQuery(document).ready(function() with jQuery(document).ready(function($) – otherwise $ inside that function only works if it’s available globally (i.e. $.noConflict wasn’t used).

    • 0