Динамически созданные поля формы держать имеющие одинаковый идентификатор

Я динамически добавить несколько текстовых полей на мою страницу с этой строкой коды:Динамически созданные поля формы держать имеющие одинаковый идентификатор

var textboxCount = 0; 

$('#addFields').on('click', function(){ 

var TextField = document.createElement("input"); 

TextField.setAttribute("type", "text"); 
TextField.setAttribute("value", textboxCount); 
TextField.setAttribute("name", "textbox"); 
TextField.setAttribute("class", "foo"); 
TextField.setAttribute("id", "textbox" + textboxCount); 
TextField.setAttribute('onkeyup','doSomething('+textboxCount+');'); // for FF 
TextField.onkeyup = function() {doSomething(textboxCount);}; // for IE 

jQuery('#TextfieldList').append(eleText); 
textboxCount += 1; //Increment the count 

});

Теперь мне нужен уникальный идентификатор поля в этой функции:

function doSomething(id){ 
    alert(id); 
}

Но когда я вызываю функцию, я получаю одинаковый идентификатор с каждым добавленным полем. Однако значение в текстовом поле является правильным.

источник

2013-07-23 user2612488

Вам действительно не нужно использовать '.setAttribute()' для всех этих свойств. Вы можете просто ссылаться на свойства непосредственно на элемент (например, 'TextField.name =" textbox ";'). Единственным исключением является свойство «type», которое для старых версий IE (и, возможно, new?) Должно быть установлено при создании элемента: 'document.createElement (" ")' - that будет работать и в других браузерах. – Pointy

@ Первым, какие браузеры будут 'document.createElement (" ")' работать? – Musa

@ Musa Я думал, что это сработает где угодно, но, видимо, нет. Я почти уверен, что мой старый мозг не лгал мне, что это необходимо в IE (по крайней мере, старые). – Pointy

Чрезвычайно распространенная проблема. Изменение обработчика KeyUp:

TextField.onkeyup = function(textboxCount) { 
    return function() { 
    doSomething(textboxCount);}; // for IE 
    }; 
}(textboxCount);

(Избавиться от линии «для FF», это не нужно вообще.)

Если вы не ввести новую лексическую область каким-то образом, то все ваши обработчики событий будут ссылаться на ту же самую переменную textboxCount. Выполняя что-то вроде того, что я показал выше (и есть варианты), вы гарантируете, что каждый обработчик событий имеет свою собственную частную копию счетчика, поскольку он стоял во время создания обработчика.

источник

2013-07-23 23:29:56 Pointy

. Я понимаю, что на этот вопрос существует множество (по крайней мере) вариантов, но иногда изоморфизм не является очевидным для программиста кто уже сам обернулся в эту проблему :) – Pointy

Так как вы хотите, чтобы получить идентификатор элемента в своем собственном обработчике события вы можете обойти весь вопрос закрытия, только ссылки this.id, где this является элементом и идентификатором является его id свойством

TextField.onkeyup = function() {doSomething(this.id);};

источник

2013-07-23 23:37:46 Musa

Ничего себе, спасибо большое, это, безусловно, очень помогло мне! – user2612488

Вы могли бы просто использовать библиотеку JQuery у вас есть в игре:

$('#addFields').on('click', function() { 
    var thisId = $('.foo').length + 1; 
    var TextField = '<input type="text" name="textbox" class="foo" value="' + thisId + '" id="textbox' + thisId + '">'; 
    jQuery(TextField).appendTo('#TextfieldList'); 
}); 
$('#TextfieldList').on('keyup', '.foo', function() { 
    doSomething($(this).attr('id')); 
    // or 
    doSomething(this.id); 
}); 
function doSomething(id){ 
    alert(id); 
}

образец jsFiddle: http://jsfiddle.net/mHT7Z/

источник

2013-07-23 23:55:24

Динамически созданные поля формы держать имеющие одинаковый идентификатор

ответ

Смежные вопросы