Использование jquery .siblings() захватывает все внешние элементы div с указанным классом.

У меня есть главный div, куда я добавляю div с классом .child_txt всякий раз, когда пользователь нажимает определенную кнопку.
Новые div поставляются с кнопкой, при нажатии которой открывается окно, и вы можете ввести текст внутри textarea и отправить в соответствующий раздел child_txt.

При первом отправке он идет в нужный div, но затем, если вы отправите его во второй раз, он начнет отправляться во все .child_txt в DOM.

Как я могу отправить его только в соответствующий div, где была нажата кнопка .text?

Вот вам проект в действии: JSFIDDLE

HTML

<div class="child_txt" style="left:10px;">
    <div class='text'>T</div>
    <div class="text_container" ></div>
</div>
<div class="child_txt" style="left:220px;">
    <div class='text'>T</div>
    <div class="text_container" ></div>
</div>
<div class="text_edit" style="visibility: hidden; display: none;" >
    <textarea class="jqte-test" id="texto" name="texto" style="display:block; margin:auto; width:98%; "></textarea>
    <button class="text_submit btn" style="margin-top:5px; float:right;">Submit</button>
</div>

CSS

.child_txt{ width: 200px; height: 200px; position: absolute; background-color:rgba(73,145,145,0.7); overflow: hidden; }

.child_txt .text{ width: 14px; height: 14px; position: absolute; top: 3px; right: 0px; font-size: 14px; line-height: 100%; font-weight: bold; color: #005e5e; cursor: pointer;}

.text_container{ display:block; float: left; width: 100%; height: 100%; word-wrap: break-word;}

JQUERY

$('.text').click(function(){
    var clicked = 0;
    var clicked = this;

    $('.text_edit').removeAttr('style');
    $('.text_edit').dialog({ width:300, height:150, maxWidth: 300, maxHeight: 150, minWidth: 300, minHeight: 150 });

    $('.text_submit').click(function(){
             $(clicked).siblings('div.text_container').closest('div.text_container').html($('textarea#texto').val());
        $('.text_edit').dialog( "close" );
    });
});

jquery siblings
person CIRCLE    schedule 15.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Каждый раз, когда вы щелкаете элемент .text, вы перепривязываете обработчик .text_submit. Есть много разных способов решить эту проблему. Вот кое-что, что я быстро собрал, используя deferred. Есть много возможностей для улучшения:

http://jsfiddle.net/e7G6T/

$('.text').click(function () {
    var clicked = this;

    getText().done(function (result) {
        console.log(this);
        $(clicked).siblings('div.text_container').html(result);
    });
});

function getText() {
    var def = $.Deferred();

    $('.text_edit').removeAttr('style');
    $('.text_edit').dialog({
        width: 300,
        height: 150,
        maxWidth: 300,
        maxHeight: 150,
        minWidth: 300,
        minHeight: 150,
        buttons: [{
            text: "Submit",
            click: function () {
                def.resolve($('textarea#texto').val());
                $(this).dialog('close');
            }
        }]
    });

    return def.promise();
}
person Jason P    schedule 15.08.2013
comment
Просто идеально! Большое спасибо @Jason P - person CIRCLE; 16.08.2013
comment
еще одна вещь, теперь я пытаюсь вывести текст внутри div во всплывающую текстовую область, чтобы его можно было редактировать. Есть ли быстрый способ делать это каждый раз, когда нажимается кнопка .text? - person CIRCLE; 16.08.2013
comment
Почему каждый раз, когда я отмечаю зеленый билет, мой вопрос перестает получать помощь? - person CIRCLE; 16.08.2013
comment
@circle73 Я пошел домой на день. Вы должны иметь возможность сделать что-то подобное в обработчике кликов .text: $('#texto').val($(this).text()); - person Jason P; 16.08.2013
comment
Спасибо, @Jason P! это была последняя строка, которая мне была нужна. Ваше здоровье - person CIRCLE; 16.08.2013