2013-09-24 2 views
1

, поэтому я работаю над созданием бэкэнда/редактированием/удалением для блога - он показывает список статей с кнопкой редактирования и удаления для каждого. когда кнопка редактирования для статьи «Foo» нажата, эти вещи случаются:атрибуты добавленного HTML для переменной в jquery?

  • ДИВ расширяется и сырой HTML из формы редактирования добавляется внутри с JQuery Append().

  • DOM имеет массив объектов, каждый из которых содержит информацию для одной статьи. конкретный объект с id 'foo' извлекается и преобразуется в массив «bar».

Теперь, что я пытаюсь сделать, это установить значения добавленной формы в значения в пределах «бар». Я пробовал использовать .attr(), .val(), но ничего не работает.

Я думаю, проблема может заключаться в том, что я делаю все это в одном объеме. сразу после моего вызова .append(), я пытаюсь получить доступ к элементам, которые я просто добавил по ID. это меня отключает?

внутри функции, это, как я пытался сделать это:

$(this).parent().children('#thisone').append("<input id="articletitle">"); 
$(this).parent().children('#thisone').children('#articletitle').val("my title"); 
+1

Вы можете увидеть подсветку выше, где ваши строки указаны неправильно? – Brian

+1

В дополнение к синтаксической ошибке цитирования '$ (this) .parent(). Children ('# thisone')' заставляет меня предположить, что у вас есть дублированные идентификаторы элементов, что является недопустимым и может вызвать проблемы. –

+0

Я предполагаю, что Брайан прав. И также имейте в виду, что если у вас есть проблемы с JavaScript/JQuery, чтобы использовать консоль в Chrome. (Щелкните правой кнопкой мыши -> Проверить элемент -> Консоль) –

ответ

2

Попробуйте собрать полный элемент, прежде чем добавить его:

var $input = $("<input>", { 
    id: "articleTitle", 
    value: "my title" 
}); 

$("#thisone").append($input); 
+1

И идентификаторы всегда должны быть уникальными. Поэтому вам не понадобится '.parent(). Children()' s, но просто '$ ('# thisone'). Append()' –

0

Предположим, что ваш HTML-код будет несколько, как это

<div id="thisone"> 
    <span id="articletitle">Some Crazy Blog Title</span> 
    <a id="edittile" href="#">Edit Title</a> 
</div> 

Javascript код на вопрос:

$('#edittile').on('click', function() { 
    var value = $('#articletitle').text(); 
    var html = '<form><input type="text" value="'+ value +'">'; 
    html += '<input type="submit" value="save"></form>'; 
    $('#articletitle').html(html); 
    $(this).hide(); 
}); 

Я создал JS fiddele код ваш исх тоже проверить его здесь: http://jsfiddle.net/4hA6y/

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