Question

我有这个简单的代码：

$(document).ready(function(){  
    $(".map-marker").click(function(){  
        console.log("clicked");
        var latitude = $(this).data("data-latitude");
    });    
});

我有一个HTML元素：

<img class="map-marker" data-latitude="50.350520295349" data-longitude="50.350520295349" src="assets/img/markers/0.png">

但由于某种原因，这个简单的代码并不起作用。如果我把console.log放在click函数之外，如下所示：

$(document).ready(function(){  
    console.log("clicked");
    $(".map-marker").click(function(){
        var latitude = $(this).data("data-latitude");
    });    
});

我在控制台中得到了所需的响应。所以，我知道a）jQuery已加载，b）$(document).ready函数正在触发。那么什么原因可能导致我的原始代码在单击元素时不会触发？

Answer 1

你想要：

var latitude = $(this).attr("data-latitude");

或者你可能会想：

 var latitude = $(this).data("latitude");

如果点击不是，请改用

    $(document).on("click", ".map-marker", function(){


    });

.on()的原因是因为我猜你正在谈论的元素是在执行第一个代码时动态创建的（在document.ready（）之后）。如果document.ready（）时元素不存在，那么你必须使用.on()

这是我最好的猜测 - 因为正如评论所说的那样，OP中的代码是有效的工作代码，当然除了.data("data-latitude")，但是这也被解决了

Answer 2

应该是：

$(this).data('latitude')

或：

$(this).attr('data-latitude')

使用data()方法时，会自动将data-前缀添加到名称中。

请注意，您应该始终使用.attr()或.data()，而不是将它们与相同的属性混合使用，因为.data()在第一次访问属性值时会缓存它。

Answer 3

$(this).attr("data-latitude");正是您要找的。 Attr代表属性，它是您获取在HTML中设置的属性值的方式。

您确定要包含JS文件，或者您的函数是否在范围内？

单击元素时尝试获取响应

3 个答案: