Question

我在html页面中有这个内容：mypage.html

<a href="http://site1" target="_blank" class="hrefClass" id="href_id1"><here an image></a>
<a href="http://site2" target="_blank" class="hrefClass" id="href_id2"><here an image></a>

此内容ID通过以下方式加载：

$('#myContent').load('mypage.html');

当我点击img_link时，我想拥有href。

例如：如果我点击img1，我想检索'http：// site1'

我怎么能这样做？

我已经尝试过了：

$('.hrefClass > img').live("click", function() {          
    alert(this.id);      
});

但没有成功。事实上，使用之前的代码，没有触发任何内容......我没有“警报”。

Answer 1

以下是一个工作示例：http://jsfiddle.net/HBsAV/

HTML

<a href="#"><img id="img_link" src="http://jsfiddle.net/img/logo.png"/>Click Here</a>

的JavaScript

$("a").click(function(){
   alert($(this).attr("href"));
});

$("#img_link").click(function(event){
   alert($(this).attr("src"));
    event.stopPropagation();
});

Answer 2

尝试 -

$('.hrefClass > img').live("click", function()
{          
    alert($(this).parent().attr("href"));  

    return false;    
});

关于jsfiddle的一个例子。

$(this)部分指向用户点击的图片，parent()函数找到所点击图片的直接父图像，attr()函数获取href函数该父级的属性值。

最后，return false语句确保链接的默认操作（即打开另一个URL）不会发生。如果要允许默认操作，则省略此return语句。

Answer 3

...试

$('.hrefClass').live('click', function() {
     alert($(this).attr('href'));   
});

如果此javascript包含在mypage.html中，您可以加载类似这样的内容。

(function($){
jQuery.fn.myload = function(url){
    var self = $(this);
    $.ajax({
        type: "GET",
        url: url,
        async: true,
        success: function(data){
            self.html(data);
        }
    });
};
})(jQuery);

加载..

$('#mypage').myload('mypage.html');

Answer 4

您需要使用load（）的回调函数，以便在加载发生后运行。

e.g。

$('#mycontent').load('/mypage.html', function() {
  $('.hrefClass > img').live("click", function() { alert(this.id); });
});

有关jQuery.load（）

的更多详细信息，请参阅http://api.jquery.com/load/

Answer 5

在click事件处理程序中，this将引用单击的元素，该元素很可能是图像。因此，它不会有id或href属性（因此在使用id时您看不到警报的原因。）

您可以使用closest功能搜索DOM树并获取与所点击元素最接近的a元素，然后获取href属性：

$('.hrefClass > img').live("click", function() {          
    alert($(this).closest("a").attr("href"));      
});

请参阅此here的工作示例。

Answer 6

你可以使用jquery.livequery一个不错的插件

Live Query利用jQuery选择器的强大功能，通过绑定事件或自动神奇地触发匹配元素的回调，即使在页面加载和DOM更新后也是如此。[1]

$('.hrefClass').livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
});

这会将'click'事件绑定到新插入DOM的每个匹配元素，即使您append()手动创建了DOMElements。

[1]取自https://github.com/brandonaaron/livequery

使用加载的页面获取HREF值

6 个答案:

HTML

的JavaScript