单击li元素

时间:2017-04-03 11:51:27

标签: javascript php jquery html

我有一个像这样的 HTML列表

<ul id='years'>
<li class='year'>2014</li>
<li class='year'>2015</li>
<li class='year'>2015</li>
</ul>

当我点击“2014”时,我需要隐藏其他列表并仅显示点击的一个然后将今年传递给php文件,赶上今年并连接到数据库烘焙与今年相关的其他数据然后在列表末尾列出这个新数据,我尝试了这个:

jQuery部分:

<script> 
$('.year').click(function(){
var path=$(this).text();
$(".year").toggle(200);
$(this).toggle(200);
$.post("test.php",{p:path},function(data){
$(".years").append(data);
});

// last part of script
$(".col_1").click(function(){
//whatever 
});

</script>

test.php的:

if(isset($_POST['p']){
$year=$_POST['p'];
$db_connection=new mysqli(localhost,USER,PASS) ;
$query="select*from user.info where year=$year" ;
$db_connection->query($query);
$rows=$db_connection->num_rows;
for($i=0;$i<$rows;$i++){`
$result->data_seek($rowP);
$result->fetch_assoc()["col_1"];
$returned_data.="<li class='col_1'>$result</li>";
}
echo "$returned_data";
}

所有这些都运行良好,数据显示在网页中,但脚本的最后一部分不起作用,当我点击此列表的任何元素时没有任何反应。原因是因为<li class='col_1'>由php编码或者是什么?...感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

在ajax

中的$(".col_1").click(function(){函数内移动Success

$('.year').click(function(){
  debugger;
  var path=$(this).text();
  $(".year").toggle(200);
  $(this).toggle(200);
  $.post("test.php",{p:path},function(data){
    $(".years").append(data);
    $(".col_1").click(function(){
    //alert();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='years'>
<li class='year'>2014</li>
<li class='year'>2015</li>
<li class='year'>2015</li>
</ul>