使用 jquery .siblings() 抓取具有指定类的所有外部 div

Question

我有一个主 div，每当用户单击某个按钮时，我都会在其中附加带有 .child_txt 类的 div。
新的 div 带有一个按钮，单击该按钮会弹出一个窗口，您可以在 textarea 中输入文本并提交给对应的 div child_txt。

在第一次提交时，它转到正确的 div，但是，如果您第二次提交，它开始向 DOM 中的所有 .child_txt 提交。

我怎样才能让它只提交到按钮.text被点击的相应的div？

这里有正在运行的项目： 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" );
    });
});

Answer 1

每次单击 .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();
}