我如何更新jQuery以允许多个按钮单击以使用ajax动态调用/更新数据？

Question

hey guys, im having some trouble... i'm able to capture the first button on the page, but there are a total of 10 buttons. When I click on any of those 10 buttons, only the first button's value is called and the other ones don't update. is there a way to capture all of the buttons so they each have their own independent value and update their values so jQuery's ajax function gets the new one? the buttons are being created out of a multidimensional array loop.

<?php
$characters = $char->getCharactersListFromAccountId($_SESSION['acctid']);
 foreach ($characters as $key) {
  if(is_array($key)){
    echo "<input class=\"button\" type=\"button\" href=\"javascript:void(0)\" value=\"Show\" style=\"vertical-align: top\" />";
    echo $char->getFaction($key['guid']), "&nbsp;";
    echo $char->getClass($key['guid']), "&nbsp;";
    echo "<span class='style'>", $char->getLevel($key['guid']), "</span>&nbsp;";
    echo "<span class='style'>", $key['name'], "</span>";
    echo "<input class=\"GUID\" type=\"hidden\" name=\"GUID\" value=\"";
    echo $key['name'];
    echo "\" />";
    echo "<br>";
  } else {
    echo "<br>";
    echo "<b><h1>My Characters: $key</h1></b><br />
";
  }
}
?>
<div id="view" style="display: none;"></div>
<script>
 $(".button").livequery('click', function(event) {
  var GUID = $('.GUID').val();
  $("#view").html('Retrieving...');
  $("#view").show("slow");
  $.ajax({
   type: "POST",
   data: "ID=" + GUID,
   url: "character.php",
   success: function(msg){
    $("#view").html(msg);
   }
  });
});
</script>

Answer 1

From what I can gather, the issue you are facing is that you need to send only the GUID which belongs to the clicked button - i.e. the next one in the document. If I'm correct, you can try this:

$(".button").livequery('click', function(event) {
    // get the next GUID value
    var GUID = $(this).nextAll('.GUID:first').val();
    ...

Also, is there any real need to use livequery for that?