我有一个网站,连接到一个数据库,并显示一些图片。我想做的是,当你点击其中一张图片时,它会显示一个警告,但当图像动态渲染时,这似乎不起作用。每当我在jsbin上尝试它时,它就会工作,但当我用php文件尝试它时,它就不会了。我正在使用jquery和bootstrap。
JSbin: http://jsbin.com/xamovudiroqe/2/
PHP代码while($i > $y){
$picture_query = mysqli_query($link, "SELECT * FROM images WHERE team = '$full_table_array[$y]' AND teamphoto = 1");
$picture_array = mysqli_fetch_array($picture_query);
echo "
<div data-team='" ".$picture_array['team']." '" class='"col-xs-6 col-md-3'">
<a href='"#'" class='"team-nail thumbnail'">
<img src='" ".$picture_array['name']." '" >
</a>
</div>
";
$y++;
}
Javascript代码 $(".team-nail").click(function() {
var team = $(this).attr('data-team');
alert(team);
alert("hi");
console.log(team);
});
我看到问题了。您正在向锚元素添加click事件,但是data-team属性位于div元素上。您所需要做的就是将data-team属性移到锚中,它就会像魅力一样发挥作用。
echo "<div data-team='" ".$picture_array['team']." '" class='"col-xs-6 col-md-3'">
<a href='"#'" class='"team-nail thumbnail'">
<img src='" ".$picture_array['name']." '" >
</a>
</div>";
:
echo "<div class='"col-xs-6 col-md-3'">
<a href='"#'" data-team='" ".$picture_array['team']." '" class='"team-nail thumbnail'">
<img src='" ".$picture_array['name']." '" >
</a>
</div>";