jQuery技术问题：如何为按钮绑定点击事件并实现URL加载

你这段代码的问题在于混用了原生DOM操作和jQuery方法：用document.querySelectorAll拿到的是原生DOM元素，而.click(function(){...})是jQuery的事件绑定方法，原生DOM元素不能直接调用这个方法，导致点击事件绑定失败。

下面给几种可行的修改方案：

方案一：全程用jQuery操作（更简洁） #

直接用jQuery选择器获取按钮，遍历后直接绑定点击事件：

<script>
$(document).ready(function() {
    var url = '@Url.Action("_Research", "Dashboard")';
    $('.btn').each(function() {
        const currentBtn = $(this);
        // 测试用的alert，上线后可删除
        alert(currentBtn.attr('id'));
        currentBtn.click(function() {
            $('#researchDiv').load(url, {
                ticker: currentBtn.attr('id')
            });
        });
    });
});
</script>

方案二：保留原生选择，适配事件绑定 #

如果坚持用原生方法选择元素，有两种方式修复：

方式1：将原生元素转为jQuery对象 #

<script>
$(document).ready(function() {
    var url = '@Url.Action("_Research", "Dashboard")';
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(function(currentBtn) {
        alert(currentBtn.id);
        // 把原生DOM元素包装成jQuery对象
        $(currentBtn).click(function() {
            $('#researchDiv').load(url, {
                ticker: currentBtn.id
            });
        });
    });
});
</script>

方式2：用原生事件绑定API #

<script>
$(document).ready(function() {
    var url = '@Url.Action("_Research", "Dashboard")';
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(function(currentBtn) {
        alert(currentBtn.id);
        // 用原生addEventListener绑定点击事件
        currentBtn.addEventListener('click', function() {
            $('#researchDiv').load(url, {
                ticker: currentBtn.id
            });
        });
    });
});
</script>

补充：动态按钮的处理 #

如果按钮是页面加载后通过JS动态生成的，上面的静态绑定方式会失效，这时候需要用事件委托：

<script>
$(document).ready(function() {
    var url = '@Url.Action("_Research", "Dashboard")';
    // 委托给父容器（推荐用按钮的直接父元素，而非document）
    $(document).on('click', '.btn', function() {
        const currentBtnId = $(this).attr('id');
        $('#researchDiv').load(url, {
            ticker: currentBtnId
        });
    });
});
</script>

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