Question

我知道有类似的问题已被提出，但我还是无法正确实施有效的解决方案。这是JS小提琴。

这是html代码

    <body>

<div id="formula1">
<form>
  <div id="title"> <span>Title</span><input type="text" maxlength="85" size="60"> <input id="random" type="checkbox" style="float:right;"><span style="float:right"> Random? </span><br><br></div>
  <span>Add</span><input type="number" id="addquant" min="1" max="95"><button type="button" class="addmore">More Entries</button>
  <span>Remove</span><input type="number" id="delquant" min="1" max="95"><button type="button" class="delmany">Entries</button>
  <br><br>
  <button type="button" class="preview">Preview</button>
</form>
</div>

<div id="iddisplay"></div>

</body>

这是脚本

var entlim = 10; // The maximum number of thoughts
var charlim = 10; // The maximum number of characters in each entry

// These are the insert variables when adding new entries
var ins1 = "<div id='temp' class='entry'>";
var ins2 = "<span class='label'> pi. </span>";
var ins3 = "<input type='text' class='entinput' maxlength='" + charlim + "' size='90'> <button type='button' class='entDelete'> Delete </button> ";
var ins4 = "<button type='button' class='entAdd'> Add above </button>";
var ins5 = "<span class='photo'>Add photo?<input class='pic' type='checkbox'></span><br><span class='countdown' style='font-size:12px;left:18px;position:relative'></span><br></div>";
var ins6 = ins1 + ins2 + ins3 + ins4 + ins5;

// Adds individual entries above the clicked button
function addAbove(abo){
  var count = $('div.entry:last').attr('id');
  count = count.replace(/\D/g,'');
  count = parseInt(count);
  if (count >= entlim) {  // Make sure the limit of entries hasn't been reached
    alert("Too many thoughts!");}
  else {
    $(abo).before(ins6);}
    }

// Renumbers all entries sequentially (id's and text label all updated)
function setDivIDs()
  {
  $.each($('form>div.entry'), function(ind,val){
    var num = ind + 1;
    $(this).attr('id', 'ent' + num);
    $(this).find('span.label').html(num + '. ');
    });
  }

function updateCountdown()
  {
  $.each($('form>div.entry'), function(){
    var remaining = charlim - $(this).children('.entinput').val().length;
    if (remaining <= 10 && remaining > 0) {
      $(this).children('span.countdown').text(remaining).css("color","orange");
      }
    else if (remaining === 0) {
      $(this).children('span.countdown').text(remaining).css("color","red");
      }
    else {
      $(this).children('span.countdown').text('');
      }
    });
  }

// Buttons activated after the page has fully loaded
$(document).ready(function(){

  //Build entries (executes one time)
  for (var i = 0; i < 5; i++){
    $('#title').after(ins6);
    }
  setDivIDs();

  // Add individual entry activation
  $('form').on('click', '.entAdd', function(){
    addAbove($(this).parent());
    setDivIDs();
    updateCountdown();
  });

  // Delete individual entry activation 
  $('form').on('click', '.entDelete', function(){
    $(this).parent().remove();
    setDivIDs();
    if ($('.entry').length < 5) // Make sure that at least 5 entries show at all times
      {
      $('div.entry:last').after(ins6);
      setDivIDs();
      updateCountdown();
      }
  });

  // Add more entries based on user input (limit number of entries)
  $('form').on('click', '.addmore', function(){
    var num = $("#addquant").val();
    for (var i = 0; i < num; i++){
      var count = $('div.entry:last').attr('id');
      count = count.replace(/\D/g,'');
      count = parseInt(count);

      if (count < entlim) 
        {
        $('div.entry:last').after(ins6);
        setDivIDs();
        }
      else
        {
        alert("Too many Entries");
        break;
        }
        $('#addquant').val('');}
    });

  // Delete many entries based on user input (need to limit number deletes)
  $('form').on('click', '.delmany', function(){
    var num = $("#delquant").val();

    for (var i = 0; i < num; i++)
      {
      if ($('.entry').length > 5) 
        {
        $('div.entry:last').remove();
        $('#delquant').val('');
        }
      else
        {
        break;
        }
      } 
    });

   // Update the character countdown
   updateCountdown();
   $.each($('form>div.entry'), function(){
     $(this).children('input').change(updateCountdown);
     $(this).children('input').keyup(updateCountdown);
     });

   // Create upload button for photo uploaded  
   $('form').on('click', '.pic', function(){
     if (this.checked) {
     var count = $(this).parents('div').attr('id');
     count = count.replace(/\D/g,'');
     count = parseInt(count);
     var picins = "<input type='file' id='pic" + count + "'><button type='button' class='rempic'>Remove</button>";
     $(this).parent('span').html(picins);
     };});

   // Remove photo upload button and revert back
   $('form').on('click', '.rempic', function(){
     var addp = "Add photo?<input class='pic' type='checkbox'>";
     $(this).parent('span').html(addp);
     });
});

正如您所看到的，字符数适用于最初创建的条目，但是，如果您单击＆＃34;添加上面的＆＃34;然后输入新的输入字段，字符计数不会更新，直到你离开输入。

从我收集到的内容来看，我需要使用.on，但我显然无法做到这一点。

Answer 1

问题是你的事件没有自动绑定到新元素..要做到这一点，请使用A.Wolff建议的委托：

我已经从你的代码创建了这个小提琴：

http://jsfiddle.net/jFIT/v8ZMp/

这将使用调用updateCountdown的keyup事件自动将任何文本输入与表单中存在的类.entinput绑定。

$('form').on('keyup', '.entinput', function(){
   updateCountdown(); 
});

字符计数不适用于动态输入

1 个答案: