javascript - jQuery 只触发一次

Question

我遇到一个问题:我的 jQuery 只触发一次:

<script type="text/javascript">
$(function() {
    $('#delcat').click(function() {
        var elem = $(this);
        var parents = $('.did' + elem.attr('data-catid'));
        var parents2 = $('.did2' + elem.attr('data-catid'));
        $.ajax({
            type: 'get',
            url: 'del_name.php',
            data: 'id=' + elem.attr('data-catid'),
            beforeSend: function() {
                elem.animate({ 'backgroundColor': '#fb6c6c' }, 400);
                parents2.animate({ 'backgroundColor': '#fb6c6c' }, 400);
            },
            success: function() {
                parents.fadeOut("slow");
            }
        });
        return false;
    });
});
</script>  

我只能删除第一个“项目”。之后它需要刷新，然后我可以再次删除下一个第一个“项目”。很困惑。

这是“项目”的显示方式:

<?  foreach($stmt as $row) { ?>
<div class="col-lg-3 col-xs-6 did<?php echo $row[0]; ?>" id="row1">              
    <div class="small-box bg-aqua">
        <div class="inner did2<?php echo $row[0]; ?>">
            <p>Name</p>
            <h2><? echo $row[1]; ?></h2>
        </div>
        <a href="#" id ="delcat" class="small-box-footer" data-catid="<?php echo $row[0]; ?>" >Delete <i class="fa fa-eraser"></i></a>
    </div>
</div>      
<? } ?>

Answer 1

您可以在单个页面上拥有一个唯一id；由于您正在循环 $stmt，因此不能多次使用 id。将 id 替换为类并绑定(bind)该类

PHP——循环

<a href="#" class="delcat small-box-footer" data-catid="<?php echo $row[0]; ?>" >Delete <i class="fa fa-eraser"></i></a>

JS 也发生了变化。

$('.delcat').click(function(){
     ....
});