我不能接受按钮上的value属性。 jQuery AJAX

Question

我为删除按钮制作了ajax脚本，并在数据库表中具有基于id的数据属性。 这是HTML：

<textarea name="komentar" id="komentar" cols="30" rows="10"></textarea><br>
    <input type="submit" name="submit" id="submit" value="Submit"><br>
    <br><br><hr><br>
    <!-- Komentar akan ada di dalam sini -->
    <div id="komentar_wrapper">

        <?php 
        include_once 'db.php';
        $query = "SELECT * FROM komentar ORDER BY id DESC";
        $show_comments = mysqli_query($db, $query);
        foreach ($show_comments as $comment) { ?>
            <p id="komentar_<?php echo $comment['id']; ?>"><?php echo $comment['komentar']; ?>
            <!-- data-id-> data attribute, buat spesifik id mana yang mau di hapus -->
                <button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment['id']; ?>">Delete</button> 
            </p>
        <?php } ?>

    </div>

当我尝试控制台数据ID时，它不会在控制台上显示该值。 这是脚本：

$(".hapus_komentar").on("click", function() {

        console.log($(this).attr("data-id"));

});

当我单击按钮时，它说未定义，我认为它应该基于按钮的data-id打印id

Answer 1

试试这个，我为您准备了一个演示代码，运行正常

<?php

        $as = array(1,2,3,4,5,6,7);
        foreach ($as as $comment) { ?>
            <p id="komentar_<?php echo $comment ?>"><?php echo $comment; ?>

                <button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment; ?>">Delete</button> 
            </p>
        <?php
        }
        ?>
        <script type="text/javascript">
           $(".hapus_komentar").on("click", function() {
            alert($(this).attr("data-id"));
            //console.log($(this).attr("data-id"));
        });
        </script>

Answer 2

使用Jquery.data（） 。 并使用事件委托，因为您的按钮是动态生成的。

$(document).on("click",".hapus_komentar",function() {

        console.log($(this).data("id"));

});

您可以使用$(this).data("id")来获取ID。

Answer 3

您的代码是正确的。 只需签入HTML weather data-id就会有价值。 也许这就是您没有获得适当价值的原因。 同样，您已经在循环中使用了该按钮，因此请确保在单击单个按钮时将获得所有按钮的数据ID。

Answer 4

    $(".hapus_komentar").on("click", function() {

        console.log($(this).data("id"));

});

现在使用这个。

Answer 5

  $(document).on("click",".hapus_komentar",function() {
    console.log($(this).attr("data-id"));
  });