Question

我有以下脚本：

$(function() {
    var no_of_file = {{$image_counter}};

            $('#remove-file').click(function() {
                 no_of_file--;
            }); 

    if (no_of_file >= '5'){
        $("#dv1").hide();
        $("#imageLabel").hide();
    }else{              
        /* Append More Input Files */
        $('#anc_add_more').click(function() {
            no_of_file++;
            // alert(no_of_file);
            if(no_of_file < {{$role_pic_limit}})
            {
            $('#spn_inputs').append('<span><input type="file" name="myfile[] id="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      

            }
            else{ 
                alert("You can upload only {{$role_pic_limit}} images");
            }
        }); 

    }
});

当我点击“添加更多文件”时，我添加更多输入并向no_of_file添加+1，我的问题是当我尝试按删除时，它应该是-1到no_of_file var，为什么它没有减少增量？

编辑15/02：

$(function() {
    var no_of_file = {{$image_counter}};

    if (no_of_file >= '5'){
        $("#dv1").hide();
        $("#imageLabel").hide();
    }else{              
        /* Append More Input Files */
        $('#anc_add_more').click(function() {
            no_of_file++;

            // alert(no_of_file);
            if(no_of_file < {{$role_pic_limit}})
            {
            $('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      

            }
            else{ 
                alert("You can upload only {{$role_pic_limit}} images");
            }
        }); 

       $(document).on('click', '#remove-file,.anc_delete_more', function() { 
           no_of_file--;
        });

    }
});

这现在正在运作，但减少并不完美就像那样：

Click add more file +1
Click add more file +1
Click add more file +1
Click remove more file -1
Click remove more file nothing no decrease
Click remove more file nothing no decrease

的jsfiddle：

https://jsfiddle.net/dgh3ndpm/2/

请查看jsfiddle我已经上传了我正在使用的内容，你可以清楚地看到问题，按添加5次，然后按删除然后再按添加更多。非常感谢

你可以看到它的工作原理并不是那么好吗？

Answer 1

使用数字，而不是字符串：（javascript自动选择他认为变量是什么，它经常混淆字符串而不是数字，除以1保证我们将有'int'变量... 我改变了你的小提琴，它很有效......

编辑：我刚才看到，它只适用于第一个'删除'，所以你明显有ID问题。

请改用类选择器。

编辑：好的，有些问题，但这是100％正常工作!! ：P

var no_of_file = 0 / 1;
$(function () {
no_of_file = 0 / 1;
if (no_of_file >= 5) {
    $("#dv1").hide();
    $("#imageLabel").hide();
} else {
    /* Append More Input Files */
    $('.anc_add_more').click(function () {
        alert(no_of_file);
        if (no_of_file < 5) {
              no_of_file++;
            $('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);" style="float:left;" class="remove-file" >Remove</a><br/></span>');

        } else {
            alert("You can upload only 5 images");
        }
        initRemove();
    }

    );
  }
}

);

function initRemove() {
$(".remove-file").unbind('click');
$('.remove-file').click(function () {
    $(this).parent().remove();

    no_of_file--;
});
}

Answer 2

编辑15/02：

http://jsfiddle.net/ccn35w40/6/

我使用的是类而不是ID，并且能够将事件附加到以后添加到DOM的标记：

$(document).on('click', '.remove-file', function () {
  alert('remove one #files:'+no_of_file);

  $(this).parent().remove();
  no_of_file--;
});

原帖：

使用HTML的其余部分和工作jsfiddle将更容易调试。这不会像你说的那样回答，当你遇到类似代码的问题时，你可以做更多的步骤。

var no_of_file = 2;

$('#remove-file').click(function() {
   no_of_file--;
   alert(no_of_file);
}); 

$('#add-file').click(function() {
  no_of_file++;
  alert(no_of_file);
});

http://jsfiddle.net/ccn35w40/1/

但它可以工作，添加 alert（）; 和 console.log（）; 以查看事件是否完全未触发或是否已被触发但是代码没有做你想要的。从那时起，您将了解更多调试方法。递增＆amp;递减本身是有效的，所以这个问题与js的其余部分有关。

你接缝做错了，你尝试将onClick和jQuery事件处理程序附加到它上面。实际上，jQuery不会被附加，因为它被称为比HTML标记存在更快。而且你有重复的ID。减少不是问题，它根本不会被调用。 jQuery事件仅附加到执行时存在的元素。如果您稍后再添加一个，则不会添加该事件。要删除重复的ID，您可以使用class而不是id，然后使用$（＆＃39; .remove-file＆＃39;）。click（）

注意＃如何变为点。主题标签用于ID和点类。

相反，你可以做到这些，不必独一无二。

您可以尝试使用 .live ，这样即使您的新标签也会添加事件监听器。

jQuery function not binding to newly added dom elements

javascript增量var无法正常工作

2 个答案: