时间戳

首页 > 解决方案 > 如何使用jquery获取单击的href标签的数据属性

javascript - 如何使用jquery获取单击的href标签的数据属性

问题描述

我在将 id 传递给 ajax 的 api url 时遇到问题，当我单击 a 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 它可以工作，但是当我的浏览器转到第二页时。身份证令人耳目一新..这就是为什么我无法得到回复，那么它将如何解决。？

e.preventDefault();

标签： javascriptjquerylaravel

解决方案

如果您的代码是由 JAvascript 动态插入到 DOM 中的，那么您必须按如下所述更正代码

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

因为您通过 id 绑定了点击事件。通过 ID，它将事件绑定到与 id 匹配的第一个元素上。因此，您必须使用类来对多个元素进行绑定单击事件，而不是使用 id。

你的 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;
}

推荐阅读