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服务器日志中看到请求。在第二次点击时，事件不会触发。我已尝试在点击事件中执行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

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

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

$event.target.value

JQuery onClick只能运行一次

2 个答案: