Ваш вопрос состоит из двух частей, поэтому и отвечать буду по порядку.
1) Два добавленный блока после нажатия, а не один
При повторном вызове .append(b)
узел b
сначала удаляется из документа, а потом добавляется в то же место. Это связано с тем, что один и тот же узел не может быть находится в двух точках дерева DOM одновременно (это просто не имеет смысла).
Если вы хотите вставить два одинаковых узла, вы можете клонировать узел перед вставкой, например так:
$('#con').append(b);
$('#con').append(b.clone());
2) Сохраненная data у добавленных блоков.
А с данными все нормально. Они отлично добавляются. А вот с выборкой действительно проблемы. Похоже, что проблема в том, что первый аргумент $.data
в функции appendBlock
это не тоже самое что $(".row")[0]
при попытке получения данных. Как бы то ни было, я бы рекомендовал использовать использовать метод .data
на узле вместо $.data
:
var b = $("<div class='row'>r</div>");
b.data('test', 2);
// ...
$('#con .row').first().data('test'); // Выведет 2 для ПЕРВОГО найденного div.
Таким образом весь ваш код может выглядеть как-то так:
function appendBlock() {
b = $('<div class="row">r</div>');
b.data('test', 2);
$('#con').append(b);
$('#con').append(b.clone(true));
}
$('#but').click(function () {
appendBlock();
});
$('#data').click(function() {
alert($('#con .row').first().data('test'));
});
JSFiddle
UPD:
При клонировании, для копирования data
свойств нужно передвать true
в качестве первого параметра метода .clone
(см. https://api.jquery.com/clone/#clone-withDataAndEvents).
#con
?data
? Оно как-раз отлично работает: jsfiddle.net/qrou0tvc выводит в консоли2
<div id="con"></div> <button id="but">Add</button>
#con