jQuery问题：点击链接后修改href属性，点击时直接跳转如何解决？

这个问题其实是因为你没处理a标签的默认跳转行为导致的——浏览器在触发你的click事件处理函数的同时，已经准备好执行跳转了，哪怕你在函数里修改了href，跳转动作还是会立刻发生，根本等不及你想完成的其他操作（尤其是如果那些操作是异步的，比如AJAX请求）。

给你两种靠谱的解决方案，根据你的操作类型选：

情况1：你的其他操作是同步的 #

直接阻止默认行为，执行完操作后再手动跳转：

$('#mylink').click(function(e) {
    // 第一步：阻止浏览器默认的跳转行为
    e.preventDefault();
    
    // 执行你的其他操作，比如DOM修改、数据计算等
    console.log("自定义操作执行中...");
    // 举个例子：修改页面上的某个元素
    $('#status').text("操作完成，准备跳转");
    
    // 操作完成后，修改href并跳转
    $(this).attr('href', 'newURL.php');
    window.location.href = $(this).attr('href');
    
    // 或者更简单：直接跳转，不用修改href
    // window.location.href = 'newURL.php';
});

对应的HTML：

<a href="#" id="mylink">click</a>
<div id="status"></div>

情况2：你的其他操作是异步的（比如AJAX请求） #

这种情况必须把跳转逻辑放在异步操作的回调里，确保等异步任务完成后再跳转：

$('#mylink').click(function(e) {
    e.preventDefault();
    const $link = $(this);
    
    // 模拟异步操作，比如提交数据到后端
    $.ajax({
        url: 'your-api-endpoint.php',
        method: 'POST',
        data: {user_id: 123, action: 'update'}
    }).done(function(response) {
        // 异步操作成功完成后，再跳转
        console.log("后端返回成功：", response);
        $link.attr('href', 'newURL.php');
        window.location.href = $link.attr('href');
    }).fail(function(error) {
        // 处理失败情况，别让用户懵圈
        alert("操作失败，请稍后重试");
        console.error("请求错误：", error);
    });
});

为什么原来的代码不行？ #

原来的代码里，你只是修改了href，但没有阻止浏览器的默认跳转行为。浏览器的逻辑是：触发click事件处理函数 → 执行你写的代码修改href → 立刻执行默认的跳转动作。所以哪怕你修改了href，跳转还是会立刻发生，完全没给你的"其他操作"留足够的执行时间（尤其是异步操作根本还没完成）。

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