0

.child_txtユーザーが特定のボタンをクリックするたびに、クラスに div を追加するメイン div があります。
新しい div にはボタンが付いており、クリックするとウィンドウがポップアップし、 a 内にテキストを入力textareaして対応する div に送信できますchild_txt。

最初の送信では正しい div に移動しますが、2 回目に送信する.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;}

Jクエリ

$('.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" );
    });
});
4

1 に答える 1

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();
}
于 2013-08-15T21:58:24.640 に答える