追加ajax的结果按div提交

Question

我在wordpress中工作，这是一个ajax调用，我想要一个行的结果返回到ID为#hero的div。现在，因为结果是for循环，英雄div在每一行。该表单有多个提交按钮。按下特定行的提交按钮应仅将结果返回到该行的#hero div。我的意思是最接近的div（id为英雄的下一个div）。 ajax调用返回第一次点击的结果，结果以英雄ID div显示。但是当我再次按下提交按钮时它不起作用。请注意，它们是与表单关联的多个提交按钮，并且它们基本上都是明星，因为我试图在wordpress中构建星级评分系统。

jQuery的

jQuery(function ($) { 
    $(document).on("click",".star", function(e) { 
    e.preventDefault(); 

    var comp = jQuery("#competition").val(); 
    var aidd = jQuery("#aid").val(); 
    var myclickvalue= jQuery(this).val(); 
    //alert(comp+aidd); 


     var sentdata =({ 

      action: 'star', 
      clickval:myclickvalue, 
      compete:comp, 
      id:aidd 
     }) 

    $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton 

      $("#hero").html(res); 
      return false; 
     } //end of function 
     , 
     'json'); 

    }); //end inner function 
}); //end main function 

PHP代码（我只是粘贴表单代码整个代码也有其他的SQL查询等）

$form.= '<form id="voteform" action="" method="post">'; 
$form.= "<input id='category' name='category' type='hidden' value='$result->category'>"; 
$form.= "<input id='aid' name='aid' type='text' value='$result->aid'>"; 
$form.= "Title :".$result->title.'<br>'; 
$form.= "<div class='mg-image' style='margin-top:15px;'><img id='articlecontest' src='$result->path' width='250' height='250' ></div>" . '<br><br>'; 


$form.= "<input id='competition' name='competition' type='hidden' value='$result->competition'>"; 
$form.= "Username :".$result->username.'<br>'; 

$form.= "<div id='totalvotes'>"."Total Votes:".$result->votessum."<div>".'<br>'; 
$form.= "<div id='articlesummary'>".$result->articlebody."</div>"; 

$form.="<div id='clickme' style='color:blue; font-size:16px; font-family: Satisfy, Cursive;'>".'READ MORE'."</div>"; 
$form.= '<div id="articlebody">'.'This is body text'.$result->body.'</div>'; 
/////////////// 
$form.="<input class='star' id='star1' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='1' style='border:0px!important;'>"; 
$form.="<input class='star' id='star2' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='2' style='border:0px!important;'>"; 
$form.="<input class='star' id='star3' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='3' style='border:0px!important;'>"; 
$form.="<input class='star' id='star4' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='4' style='border:0px!important;'>"; 
$form.="<input class='star' class='star' id='star5' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='5' style='border:0px!important;'>"; 

$form.='<input class="star" name="star5" src="http://localhost:8080/test/wp-content/uploads/2015/05/star0.png" type="image" type="submit" value="6" /></form>'; 
/////////////// 
$form.='<div id="hero">'.'</div>'; 
}//end of foreach 
$response['form']=$form; 
    echo json_encode($response['form']); 
    exit(); 

} 

Answer 1

你的HTML标记不显示几个兄弟div为每个提交按钮，因此你不能达到你在你的问题中所陈述的。假设你有一个div#hero相邻的提交按钮，你应该改变你的这部分代码：

$.post(yes.ajaxurl, sentdata, function (res) { //start of funciton 

      $("#hero").html(res); 
      return false; 
     } //end of function 
     , 
     'json'); 

要这样：

var element = $(this); 
$.post(yes.ajaxurl, sentdata, function (res) { //start of funciton 

      $(element).next(".hero").html(res); 
      return false; 
     } //end of function 
     , 
     'json'); 

但你与当前的标记，你应该更改代码以这种一。我假定你改变#hero到.hero

var element = $(this); 
$.post(yes.ajaxurl, sentdata, function (res) { //start of funciton 

      $(element).siblings(".hero").html(res); 
      return false; 
     } //end of function 
     , 
     'json');