1

私はdivコンテナを持っています。ユーザーがこの div コンテナーをクリックすると、これが入力ボックスに置き換えられます。
ユーザーが入力ボックス以外のページのどこかをクリックすると、前の div が再び表示されるようにします。

これが私が今までなんとかやってきたことです。これは一度だけうまくいきます。これはJavaScriptコードです：

$(document).ready(function() {
$(".new-section").click(function(event) {
    $(this).replaceWith('<div class="span8 offset1 create-section"><input type="text" placeholder="Enter the title of the section"></div>');
    event.stopPropagation();
});

$(".create-section").click(function(event) {
    event.stopPropagation();
});

$(document).click(function(event) {
    $(".create-section").replaceWith('<div class="span8 offset1 new-section"><p>Click to add a new section</p></div>');
});
});

これは HTML コードです。

<div class="span8 offset1 new-section">
    <p>
    Click to add a new section
    </p>
</div>

入力を div に置き換えた後、さらに div をクリックしても、入力ボックスは再び表示されません。クリックイベントは一度しかトリガーされないようです。基本的に私が欲しいのは:
1. ユーザーが div をクリックする
2. Div が入力に置き換えられる
3. ユーザーが入力の外側をクリックする
4. 入力が div に置き換えられる
5. ユーザーが div をもう一度クリックすると、入力ボックスが戻ってきます。

サイクルが繰り返されます。今のところ、これを機能させることができたのは一度だけです。私が間違っていることは何ですか？

編集: ユーザーが . ユーザーが Web ページの他の場所 ( 以外) をクリックした場合にのみ、 が再び表示されます。つまり、 と 要素の間のトグルです。

4

4 に答える 4

2

要素を動的に作成しているので、イベントを委任する必要があります。

$(document).on('click', '.new-section', function(event) {

ただし、要素の可視性を切り替える方が、要素を置き換えるよりも効率的です。

<div class="new-section">
    <p>
        Click to add a new section
    </p>
</div>
<div class="span8 offset1 create-section">
    <input type="text" placeholder="Enter the title of the section">
</div>


$(document).ready(function() {
    var $section = $(".new-section"),
        $div = $('div.span8');

    $section.click(function(event) {
        $section.hide();
        $div.show().find('input').focus()
    });

    $div.find('input').blur(function(event) {
        $section.show();
        $div.hide()
    });
})

http://jsfiddle.net/34wHG/

フォーカスイベントとブラーイベントを使用したことに注意してください。セクションを生成するボタンを作成し、ボタンがクリックされたときにdiv要素を非表示にすることもできます。

于 2012-12-16T12:33:43.627 に答える
0

「new-section」を動的に作成しているため、それらに直接バインドすることはできません。

代わりに、より高いレベル、ドキュメントまたはコンテナー div でバインドし、委任されたイベントをリッスンする必要があります。最新の JQuery では、「on」メソッドでこれを行います。

http://api.jquery.com/on/のセクション「直接および委任されたイベント」を確認してください

$(document).on("click", ".new-section", function(event) {
    $(this).replaceWith('<div class="span8 offset1 create-section"><input type="text" placeholder="Enter the title of the section"></div>');
    event.stopPropagation();
});

$(document).on('click', ".create-section", function(event) {
    event.stopPropagation();
});
于 2012-12-16T12:38:51.677 に答える
0

ダミーをクリックするとdivまたは入力が変更されるように、バックグラウンドにダミーを配置することもできます。

HTML:

<div id="page1" >
    <div id=dummy"></div>
    <div id="content></div>
</div>
<div id="page2">
    <div id=dummy"></div>
    <input/>
</div>

次に、ダミークリックに応じてページの z-index を変更します。

于 2012-12-16T12:43:55.217 に答える
-1

迅速で汚いインライン編集（実際のコードを差し引いて...あまりにも怠惰です）：

<div id="clickable"></div>
<textarea id="edit_clickable"></textarea>

$('#clickable').click(function(){
//get text of #clickable
//hide clickable
//add the text to textarea
//show textarea
});
$(document).click(function(){
//get textarea text
//hide textarea
//update div text
//show div
});
于 2012-12-16T12:41:03.797 に答える