jQuery onClick只工作一次

Question

我已经检查了这个问题的几个答案，但没有任何工作。 我有一组按钮将触发Ajax调用，并且该调用将使用具有更新信息的新按钮替换按钮。 这适用于第一次点击，但不适用于任何后续点击。

按钮组如下所示：

<div class="btn-toolbar" role="toolbar" aria-label="Voting Toolbar">
    <div class="leanVote_target">
        <div class="btn-group mr-2" role="group" aria-label="Lean Votes">
            <button type="button" id="2_-3" {% if vote.leanVote == -3 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>Left</button>
            <button type="button" id="2_-2" {% if vote.leanVote == -2 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>2</button>
            <button type="button" id="2_-1" {% if vote.leanVote == -1 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>1</button>
            <button type="button" id="2_0" {% if vote.leanVote == 0 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>Center</button>
            <button type="button" id="2_1" {% if vote.leanVote == 1 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>1</button>
            <button type="button" id="2_2" {% if vote.leanVote == 2 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>2</button>
            <button type="button" id="2_3" {% if vote.leanVote == 3 %} class="voteButton btn-sm btn-success"{% else %} class="voteButton btn-sm btn-primary"{% endif %}>Right</button>
        </div>
    </div>
</div>

因此，如果不是选中的按钮，它将是主要按钮；如果不是选中的按钮，则将成为成功按钮。 然后，我有以下JQuery代码：

<script>
    function sendVote(id, type, vote) {
        $.ajax({
            url:'/webproxy/v/?i=c&pk=' + id + '&t='+type+'&v='+vote,
            type:'get',
            dataType:'html',
            crossDomain:true,
            success:function(data) {
                if(type == 2) {
                    $(".leanVote_target").html(data);
                } else if (type == 1) {
                    $(".credVote_target").html(data);
                } else if (type == 3) {
                    $(".controlVote_target").html(data);            
                }
            },
            error: function(data) {
                return data;
                //$(".leanVote_target").html(data);
            }
        });
    }

    $(document).ready(function(){
        $(".btn-group").on("click", '.voteButton', function( event ) {
            var parts = event.target.id.split("_");
            sendVote({{comment.id}}, parts[0], parts[1]);
        });
    });
</script>

这将正确地将投票发送到/ webproxy / v / 。 然后，位于/ webproxy / v /的脚本返回一个相同的btn-group ，但是其颜色经过更新以显示最近的投票。 我可以确认可以正常工作，进行颜色更新，数据库更新，并且可以在Web服务器日志中看到请求。 第二次单击时，事件不会触发。 我尝试在on-click事件中执行console.log('hello world') ，所以我确定它是在发生故障的那个级别上。 点击事件不会在第二次点击时触发，因此，如果我选择1，然后选择2，则应该看到2个对服务器的请求和2次点击事件的触发，但我没有。

这是单击2后， / webproxy / v /脚本的返回输出：

<div class="btn-group mr-2" role="group" aria-label="Lean Votes">
    <button type="button" id="2_-3"  class="voteButton btn-sm btn-primary">Left</button>
    <button type="button" id="2_-2"  class="voteButton btn-sm btn-primary">2</button>
    <button type="button" id="2_-1"  class="voteButton btn-sm btn-primary">1</button>
    <button type="button" id="2_0"  class="voteButton btn-sm btn-primary">Center</button>
    <button type="button" id="2_1"  class="voteButton btn-sm btn-primary">1</button>
    <button type="button" id="2_2"  class="voteButton btn-sm btn-success">2</button>
    <button type="button" id="2_3"  class="voteButton btn-sm btn-primary">Right</button>
</div>

为什么这没有注册.on('click')以及如何使它响应无限次数？

谢谢。

Answer 1

$(".btn-group").on("click", '.voteButton', function( event ) {

您的委托绑定位于btn-group上，但是看起来您正在动态创建btn组。 在不是动态创建的对象上委托更高的绑定。

由于您将html附加到三个元素之一，因此可以在它们上委派绑定。

$(".leanVote_target, .credVote_target, .controlVote_target").on("click", '.btn-group .voteButton', function( event ) {

Answer 2

if(type == 2) {
    $(".leanVote_target").html(data);
} else if (type == 1) {
    $(".credVote_target").html(data);
} else if (type == 3) {
    $(".controlVote_target").html(data);            
}

上面的条件是使用.html（）替换btn-group，因此将放置侦听器的$（“。btn-group”）替换为新的btn-group。 您可以通过将侦听器放在DOM中不会替换的元素上来解决问题。

$(".btn-toolbar").on("click", '.voteButton', function( event ) {