如何获得点击一个href标记使用jquery的数据属性

Question

我传递ID到AJAX的API网址的问题，还有就是我的成功没有任何的功能反应，当我点击一个href标记。

所以，首先我需要获取所有的专辑，这是已经完成，并获取良好。因此，代码是这样的。

功能让所有的相册：

    $(document).ready(function(){
    $.ajax({
        url:'http://localhost:8000/api/peoplegallery',
        dataType: "json",
        contentType: "application/json",
        success:function(response) {



            var peoplegallery = response[0].gallery_table;
            $.each(peoplegallery, function (index, el) {

                var stringify_list_gallery = jQuery.parseJSON(JSON.stringify(el));
                var gallery_file = stringify_list_gallery['file'];
                var people_gallery_image = '<img src=/storage/' + gallery_file + ' class="d-block w-100">';
                var gallery_id = stringify_list_gallery['content_id'];
                var gallery_content_title = stringify_list_gallery['content_title'];
                var gallery_event_dated = stringify_list_gallery['event_dated'];

                var peoplegallery_data;

                peoplegallery_data = 
                '<div class="col-md-4">\
                    <div class="card" style="margin-left:20px;">\
                        <img class="card-img-top" src="/storage/'+gallery_file+'" alt="Card image cap" style="height:200px;">\
                        <div class="card-body">\
                             <h5 class="card-tilte">\
                                <a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;">'+gallery_content_title+'</a>\
                             </h5>\
                        </div>\
                        <div class="card-footer">\
                            <small class="text-muted"><i class="icon ion-md-calendar" style="font-size:15px; color:#800000;"></i><i class="far fa-calendar-check"></i> '+gallery_event_dated+'</small>\
                        </div>\
                    </div>\
                    <br><br>\
                </div>\
                ';

                $('#list_peoplegallery').append(peoplegallery_data);

            });


        },
        error:function(response) {
            console.log(response);
        }
    });
}); 

所以输出看喜欢这一点，我会给例子

如果我点击我要拿到专辑中的所有图像，所以我创建了一个函数来获取所有的图像，但问题是我不能得到的ID。

函数来获取特定图像的专辑。

    $(document).ready(function(){   
    $(document).on('click','.clicked_albums',function() {
        var album_id= $(this).data('id');
        $.ajax({
            url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
            dataType: "json",
            contentType: "application/json",
            success:function(response) {
                console.log(response);
            },
            error:function(response) {
                console.log(response);
            }
        });
    }); 
}); 

所以我给的补救措施，以验证是否值回我使用的preventDefault它的工作原理，但是当我的浏览器转到第二页。 id是刷新..这就是为什么我不能得到响应，所以它会如何解决？

e.preventDefault(); 

Answer 1

要获得属性数据ATTR画廊的编号，你必须使用的内容

$(this).attr("data-attr-gallery-id")

或。数据（）（如果使用较新的jQuery> = 1.4.3）

$(this).data("attr-gallery-id")

Answer 2

如果你的代码插入到DOM动态由JavaScript，那么你必须正确的代码如下所述

<a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;">'+gallery_content_title+'</a>

因为你已经通过ID绑定click事件。通过ID其结合，其与ID匹配在第一元件上的事件。因此，而不是使用ID，您必须使用类多元素绑定click事件。

你的JS代码应该是

$(document).ready(function(){   
    $(document).on('click','.clicked_albums',function() {
        var album_id= $(this).data('id');
        $.ajax({
            url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
            dataType: "json",
            contentType: "application/json",
            success:function(response) {
                console.log(response);
            },
            error:function(response) {
                console.log(response);
            }
        });
    }); 
}); 

我也看到，在服务器端PHP代码的功能有一个错误，我可以看到返回值。它返回从已呼吁没有给作为输出的函数值。

public function peoplegallery_album($id)
{
    $url_id = $id;
    $get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$url_id]);
    echo $url_id;
    die();
    return $url_id;
}