如何使用jQuery获取div内链接的href属性？

我尝试使用jQuery获取#films容器内动态加载的链接的href属性，但没能成功。页面会在#films容器内动态加载包含链接的div，页面代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Cinemas</title> 
</head> 
<body> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <div id = "films"></div> 
    <script src="script.js"></script> 
</body> 
</html>

我的script.js代码如下：

$(document).ready(function() { 
    $.get(myUrl, function(data) { 
        // this block works 
        $('#films').html($('.block_afisha', data).html()) 
    }); 
    $('#films').find('a').each(function() { 
        // there is no iterations here 
        console.log($(this).attr('href')); 
    }); 
});

请问该如何修复这个问题？

这个问题的核心是异步操作的执行顺序：$.get是异步请求，它不会阻塞后续代码的执行。当你调用$('#films').find('a').each(...)的时候，$.get的回调函数还没执行，#films里还没有任何动态加载的内容，自然找不到对应的链接。

你有两种可行的修复方案：

方案一：将链接处理逻辑放到$.get的回调函数内 #

把遍历链接的代码移到内容插入操作之后，确保是在动态内容加载完成后再执行：

$(document).ready(function() { 
    $.get(myUrl, function(data) { 
        // 先把动态内容插入到页面
        $('#films').html($('.block_afisha', data).html());
        // 现在内容已存在，可以遍历链接了
        $('#films').find('a').each(function() { 
            console.log($(this).attr('href')); 
        });
    }); 
});

方案二：使用事件委托处理后续交互（如果涉及动态元素操作） #

如果你的需求不只是一次性获取href，而是要给这些动态加载的链接绑定点击事件之类的交互操作，更推荐用jQuery的事件委托机制，利用事件冒泡来处理动态元素：

$(document).ready(function() { 
    $.get(myUrl, function(data) { 
        $('#films').html($('.block_afisha', data).html());
    }); 

    // 事件委托：监听#films内所有a标签的点击事件（包括后续动态添加的）
    $('#films').on('click', 'a', function(e) {
        e.preventDefault(); // 可选，阻止默认跳转行为
        console.log($(this).attr('href'));
    });
});

第一种方案适合你现在只是想一次性获取所有链接href的场景，第二种更适合需要和动态元素进行交互的长期需求。

内容的提问来源于stack exchange，提问作者Nico_99