Ответ 1
Здесь вам нужно использовать синтаксис делегирования событий .on()
. Изменение:
$("#add").click(function() {
к
$("#buildyourform").on('click', '#add', function () {
Я пытаюсь создать динамическую форму, где пользователь может добавлять динамические текстовые поля на основе их требований. Вот мой код jquery..
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length +1;
var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(lname);
fieldWrapper.append(removeButton);
fieldWrapper.append(addButton);
$(this).remove();
$("#buildyourform").append(fieldWrapper);
});
});
и код Html...
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<div class="fieldwrapper" name="field1" id="field1" />
<input type="text" name="name" class="fieldname" id="tb1_1" />
<input type="text" name="email" class="lastname" id="tb1_2" />
<input type="button" value="+" class="add" id="add" />
</div>
</fieldset>
<input type="submit" value="send" id="asdasd" name="submit" />
Проверьте также JSFiddle.
Что не так со мной, когда пользователь сначала нажимает кнопку "+", затем нажимает на функцию, и она добавляет два текстовых поля в мой набор полей. Но после этого, когда я нажимаю кнопку "+", его функция не запускается. Может быть конфликт id. Пожалуйста, помогите.
Здесь вам нужно использовать синтаксис делегирования событий .on()
. Изменение:
$("#add").click(function() {
к
$("#buildyourform").on('click', '#add', function () {
Вам нужно использовать делегированный обработчик событий, поскольку динамически добавленные элементы #add
не будут привязаны к событию кликов. Попробуйте следующее:
$("#buildyourform").on('click', "#add", function() {
// your code...
});
Кроме того, вы можете упростить чтение HTML-строк путем смешивания строк:
var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');
Или даже предоставление атрибутов в качестве объекта:
var fieldWrapper = $('<div></div>', {
'class': 'fieldwrapper',
'name': 'field' + intId,
'id': 'field' + intId
});
После создания id
уникального символа document
, вы должны использовать делегирование событий
$("#container").on("click", "buttonid", function () {
alert("Hi");
});
Событие клика не привязано к вашему новому элементу, используйте jQuery.on
для обработки щелчка.