Как правильно динамически добавлять события? - PullRequest
Новая
       37

Как правильно динамически добавлять события?

0 голосов
/ 27 мая 2011

Цель состоит в том, чтобы, когда я фокусируюсь на последней текстовой строке, под ней появляется еще одна.Затем отключите это на определенном количестве строк.Я не могу понять, что здесь не так: 

$(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><!--ans1-->").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><!--question-->
<input type="submit" value="Submit" />
</form>

Я получаю очень утомительный результат: каждый раз, когда появляются две строкии все имеют индекс 0 и все отвечают обработчику событий, который должен работать только для последнего ... Любые идеи, что не так с кодом?

JSfiddle

Также приветствуются любые советы о том, как сделать код умнее!

Ответы [ 2 ]

1 голос
/ 27 мая 2011

Как уже говорилось, в вашем коде есть некоторые проблемы.Я бы попробовал это так: клонировать последний div, изменить идентификатор и очистить значение ввода: 

$(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());
    });
});

http://jsfiddle.net/7enNF/1/

  • input:text: last-child выбирает входные данные, которые являются последним дочерним элементом в их родительском элементе.поэтому он выбрал бы все входные данные, потому что каждый из них является единственным (следовательно, последним) дочерним элементом в входе ansInput div
  • # qc> div: last-of-type> input выбирает входные данные в последнем div.я использовал last-of-type, потому что last-child не будет соответствовать div, потому что кнопка submit является последним потомком формы
  • конец необходим, потому что я выбираю div, затем я выбираю входс "find ('input')", чтобы очистить значение.если бы я оставил это таким образом, он вставил бы только ввод (не div).Итак, end (), чтобы снова вернуться от входа в div, чтобы div был вставлен.

Надеюсь, это не слишком запутало!:)

0 голосов
/ 27 мая 2011

Я вижу здесь пару проблем.Прежде всего, я не вижу, какова область действия вашей переменной lineCount на основе предоставленного вами кода.Во-вторых, то, что вы добавляете обработчик событий к новым создаваемым элементам, не означает, что вы удаляете его из старого.

...