动态添加事件的正确方法是什么?

编程入门行业动态更新时间:2024-10-22 15:31:24

本文介绍了动态添加事件的正确方法是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

目标是，当我专注于最后一个文本行时，在其下方出现另一个文本行.然后在一定数量的行上禁用此功能. 我似乎无法弄清楚这里出了什么问题:

The goal is, when I focus on the last text line, another one appears below it. Then disable this at a certain number of lines. I can't seem to figure out what is wrong here:

$(document).ready(function() { lineCount = 0; $("form#qc").delegate("input:text:last-child", "focus", newTextLine); }); function newTextLine() { newLine = ("<div id='ansInput{0}'>Answer {0}: <input type='text' name='ans1' /></div>").format(lineCount); currentDiv = ("#ansInput{0}").format(lineCount); $(currentDiv).after(newLine); lineCount = lineCount++; }

这是HTML页面:

<form id="qc" name="qc"> <h2>Create New Question!</h2> <div id="ansInput0">Question: <input type="text" name="Question" /></div> <input type="submit" value="Submit" /> </form>

我得到一个非常非常奇怪的结果:每次出现两行，并且所有索引都为0，并且都响应事件处理程序，该事件处理程序仅适用于最后一行... 任何想法代码有什么问题吗?

I get a very very weired result: each time two lines appear and all have index of 0 and all respond the event handler that is suppose to work only for the last one... Any ideas what's wrong with the code?

JSfiddle

欢迎提供任何有关如何使代码更智能的建议！

Also any advice on how to make the code smarter is welcome!

推荐答案

如上所述，您的代码中存在一些问题. 我会这样尝试: 克隆最后一个div，更改id并清除输入的值:

As said, there are some problems in your code. I'd try it like this: Cloning the last div, changing the id and clearing the value of the input:

$(function() { $("#qc>div:last-of-type>input").live('focus', function() { $(this).parent().after($(this).parent().clone().attr('id', 'ansInput' + $('#qc>div').length).find('input').val('').end()); }); });

jsfiddle/7enNF/1/