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处理程序。解决这个问题的方法有很多种。这是我使用延迟快速一起攻击的东西。还有很大的改进空间：

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();
}

使用jquery .siblings（）获取具有指定类的所有外部div

1 个答案: