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并绑定

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(){
     ....
});

Answer 2

使用class来做这些事情：

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

而不是

$('#delcat').click(function(){

在你的HTML中：

<a href="#" class="small-box-footer delcat" data-catid="PHPPART" >Delete <i class="fa fa-eraser"></i></a>

您的解决方案获得具有该ID的第一个元素。你永远不必使用多个相等的id。

jQuery只触发一次

2 个答案: