<a href preventDefault每秒都有效

Question

我有一个垃圾图标,用户点击该图标可以从数据库中删除当前元素.ajax如果用户已javascript启用,我想让它工作.页面上有多个项目.

不知道为什么,但即使添加后preventDefault,href工作就像常规href而不是表演ajax.它只ajax在我每次点击垃圾桶图标时触发请求而不刷新窗口.

你知道问题出在哪里吗？

$('.delete_bulletin').on('click', function (e) {
    console.log('event');
    e.preventDefault();
    $.get($(this).attr('href')).done(
            function () {
                reloadBoardContent();
            }
    );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bulletin_board">
    <div class="bulletin_card">
        <i>4. apríl 2018 14:50</i>
        <h4>NAME</h4>
        <p></p><p>htrhr</p><p></p>
        <a class="delete_bulletin" href="/bulletin-board/delete/35/"><img style="max-height: 20px" src="/static/bulletin_board/icons/trash.png"></a>
    </div>
    <hr>
    <div class="bulletin_card">
        <i>4. apríl 2018 14:49</i>
        <h4>NAME</h4>
        <p></p><p>fdsafdfs</p><p></p>
        <a class="delete_bulletin" href="/bulletin-board/delete/34/"><img style="max-height: 20px" src="/static/bulletin_board/icons/trash.png"></a>
    </div>
    <hr>
</div>

Answer 1

我敢肯定,(但需要确认)你reloadBoardContent()正在更新div,其中该<a>所在.

如果是这种情况,将替换锚点,并且事件不会触发新创建的锚点.

解决方案是使用委托事件,这将使其适用于动态添加的元素.

改为:

$('#bulletin_board').on('click', '.delete_bulletin', function (e) {

如果你不更换<div id="bulletin_board"自己而只更换它的内容,从现在开始一切都会好的.