jQuery $.ajax success runs for one time only

Question

I'm trying to implement a single-star rating (i.e. a like button).

I want to change (toggle) the star image. The only problem it seems to have is that while using $.ajax, on "success:" part, the src attr (or anything else really, like .css) applies for one (the first) time ONLY! In fact, the client has to refresh the page to see the latest star image/status (which loads from the db).

---

Here's the code:

<script language="javascript">
    // Ajax: Star
    $("#p<?php echo $pID;?>").find('.star').click(function (e) {
        e.preventDefault();

        $.ajax({
        type: "POST",
        url: "./ajax.php",
        data: "pID=<?php echo $pID;?>",
        cache: false,

        success: function(html)
        {
            $("#s<?php echo $pID;?>").attr("src",html);
        }
        });
    });
    // END OF: Ajax: Star
</script>

---

the php file echos back a filename which is meant to be replaced with the src attribute (e.g. star-on.png OR star-off.png)

So I think the question is: Why the "success: function" triggers only once?

Answer 1

I finally realized what the problem is. It is due to the server side file (php) as it always evaluates the static data given from the client side file. All I need to do is refreshing the toggle's trigger on my php file.