个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 05:50:52 24 4
gpt4 key购买 nike

我知道有人问过类似的问题，但我还无法正确实现可行的解决方案。这是 JS Fiddle。

http://jsfiddle.net/efA6C/

这是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);
     });
});

如您所见，字符计数对于最初创建的条目来说效果很好，但是，如果您单击“在上方添加”，然后在新的条目字段中键入内容，则字符计数不会更新，直到您离开输入为止.

根据我收集的信息，我需要使用 .on 但显然我无法正确执行此操作。

最佳答案

问题是您的事件不会自动绑定(bind)到新元素。要执行此操作，请使用 A.Wolff 建议的委托(delegate):

我用你的代码创建了这个 fiddle :

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

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

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

关于jquery - 字符计数不适用于动态输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22537590/

24 4 0
文章推荐： java - removeAll 似乎影响了它的论点
文章推荐： python - Python 套接字中连接被拒绝后出现无效参数
文章推荐： sql - 需要根据当前日期选择重复项
文章推荐： 用于创建 Ajax 网站的 Java 框架(相对于 Web 应用程序)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com