Question

我需要一些帮助。我有一个页面，我在其中将数据库记录显示为显示div中的引导按钮药丸。我也有一个Ajax Submit输入，它将新记录保存到数据库，并使用db record id作为按钮ID为新记录动态创建按钮药丸。下面的jQuery允许我单击新创建的动态按钮，但它始终显示ID = 1，而不显示视图源中显示的ID。

有人可以在这里解释我在做什么错吗？

从PHP创建的药丸代码：

<div class="row">
    <div class="col-md-8 col-sm-10 mx-auto mb-3">
        <div class="decision-box">
            <div class="decision-icon bg-orange-grad"><img src="../assets/img/logos/Sparck-Logo-Icon-Lg-White.png" alt="Sparck-Logo-Icon-Lg" width="40" height="40" /></div>
            <div class="decision-text">
                <form id="accolorform">
                    <input type="hidden" name="action" value="colorsave">
                    <input type="hidden" name="interesttype" value="Favorite Color">
                    <input type="hidden" name="userid" value="<?php echo $_SESSION['userid']; ?>">
                    Favorite Color:&nbsp;&nbsp;
                    <input type="text" class="form-control-inline col-auto no-border no-shadow" id="ac_color" name="interest" placeholder="Type something" autocomplete="off" style="min-width: 200px;">
                    <span class="float-right" style="margin-right: 15px;">
                        <button type="submit" class="btn btn-light" id="colorbtn">Add</button>
                    </span>
                </form>
            </div>
        </div>
        <div id="color_pills">
        <?php if(!empty($resultlist) && isset($resultlist)){
            foreach($resultlist as $r){ 
                if($r['interesttype'] = "Favorite Color"){ ?>
                <button id="btn<?php echo $r['id']; ?>" class="btnpill" title="Are you sure you want to delete <?php echo $r['interest']; ?>?"><?php echo $r['interest']; ?> <i id="<?php echo $r['id']; ?>" class="fal fa-minus-circle delete"></i></button>
                <?php }
            }
        }?>
        </div>
    </div>
</div>

创建动态按钮的jQuery aJax代码

$("#accolorform").validate({
    rules: {
        ac_color: {
            required: true
        }
    },
    messages: {
        ac_color: {
            required: 'Please select a Color'
        }
    },
    submitHandler: function(form) {
        $.ajax({
            type: "POST",
            url: "ajaxsubmit.php",
            data: $(form).serialize(),
            success: function(id){
                //alert("Color Added");
                var name = $("#ac_color").val();
                var newpill = '<button id="btn'+id+'" class="btnpill" title="Are you sure you want to delete '+name+'?">'+name+' <i id="'+id+'" class="fal fa-minus-circle delete"></i></button>';
                $("#color_pills").append(newpill);
                $("#accolorform")[0].reset();
            },
            error: function(){
                alert("Error");
            }
        });
    }
});

我尝试获取动态按钮ID的Ajax删除代码：

$(document).on('click', '.delete', function(){                  
    var id = $(this).attr('id');
    var title = $('#btn'+id).attr('title');
    var string = 'source=interests&id='+ id ;

    if (confirm(title)) {
        $.ajax({
            type: "POST",
            url: "ajaxdelete.php",
            data: string,
            cache: false,
            success: function(){
                $('#btn'+id).remove();
            }
        });
    }

    return false;
});

上面的代码看起来应该可以工作，并且查看源代码显示了一个按钮标签，其格式类似于由PHP创建的按钮标签，效果很好。

感谢您的帮助！

如何使用jQuery获取动态生成的按钮的ID？

0 个答案: