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. 用输入替换
3. 用户在输入外点击
4. 用 div 替换输入
5. 用户再次点击 div 输入框又回来了。

循环重复。到目前为止，我只成功地让它工作了一次。知道我做错了什么吗？

编辑：如果用户单击 . 仅当用户单击网页中的其他任何位置（除了 ）时，应该再次显示 。换句话说，在 和 元素之间切换。

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 回答