Django站点点击按钮触发jQuery $.load方法无响应问题求助

问题根因 #

• jQuery ID选择器语法错误：获取到的id值不含#前缀，直接写$(id)会被识别为标签选择器，无法匹配到对应DOM元素，正确写法需要补充#前缀。
• load方法的片段提取参数同样缺少#前缀，无法从返回的页面内容中定位到目标div。
• 潜在闭包问题：原代码循环中用var声明element变量，点击事件触发时element可能指向最后一个遍历的箭头元素，可直接用$(this)获取当前触发事件的元素规避该问题。

修复后代码 #

$(document).ready(function(){
    var post_list = Array.from(document.getElementsByClassName("post_container"))
    for(var post in post_list){
        post_list[post].id = 'post' + post;
    }
    // 直接给所有箭头绑定点击事件，无需额外遍历
    $(".arrow").on('click', function(event){
        if(user_auth){
            var currentParentElement = $(this).parent().parent().parent().get(0);
            var id = $(currentParentElement).attr('id');
            // 两处都补充ID选择器的#前缀
            $('#' + id).load(document.URL + ' #' + id);
        }
    })
});

效果验证 #

修改后点击箭头按钮，会自动拉取当前页面内容并替换目标div的对应内容，无需全页刷新即可更新数值。

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