如何在Jquery中多次调用一个函数来添加一个事件监听器而不只是监听最后一个？

Question

So I want to create a function that counts the characters in a text box and prints the number below it. The thing is that I want to be able to reutilize the function two times since I have two text boxes.

  <textarea id="custom_message" placeholder="sumthin sumthin" maxlength="240"></textarea>
  <div id="charsleft1" class="span-8" style="float:right; text-align:right"></div>

  <textarea id="restriction_message" placeholder="other sumthing" maxlength="240"></textarea>
  <div id="charsleft2" class="span-8" style="float:right; text-align:right"></div>

I want to call this function two times but only the last call to the function works, here's my function.

function char_counter_limit(selector, content){
    text_box = "#"+selector.split("#")[1]
    counter = "#"+selector.split("#")[2]
    var maxlength = $(text_box).attr("maxlength");
    $(counter).text(0+" / "+maxlength);
    $(text_box).on("input", function(){
        var maxlength = $(this).attr("maxlength");
        var currentLength = $(this).val().length;
        if(currentLength <= maxlength){
            $(counter).text(currentLength+" / "+maxlength);
        }
    })
}

The selector would be the id's of the textbox and the div in one string ej: "#custom_message#charsleft1"

Answer 1

Assuming you're passing distinct selectors in, the problem is that your code is falling prey to what I call the Horror of Implicit Globals : You need to declare text_box and counter so that they're local to the char_counter_limit function, not globals. When they're globals, the second call overwrites the first.

Put var in front of them:

function char_counter_limit(selector, content){
    var text_box = "#"+selector.split("#")[1]
    var counter = "#"+selector.split("#")[2]