Question

我有一个div容器。如果用户单击此div容器，则将其替换为输入框如果用户单击页面上除输入框以外的任何其他位置，则我希望再次显示前一个div。

This是我迄今为止所做的。这只能工作一次。这是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不会再次输入输入框。看起来click事件只是一次。基本上我想要的是：
1.用户点击div
2. Div替换为输入
3.用户点击外部输入
4.输入替换为div
5.用户再次点击div并返回输入框。

循环重复。截至目前，我已经设法让这个只工作一次。知道我做错了吗？

编辑：如果用户点击，我不想再允许再次显示。只有当用户点击网页中的任何其他位置（除了）之外，才应再次显示。换句话说，在元素和元素之间切换。

Answer 1

在动态创建元素时，您应该委派事件：

$(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元素。

Answer 2

由于您是动态创建“新节”，因此无法直接绑定它们。

相反，你应该绑定更高级别，doucment或容器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();
});

Answer 3

你可能在背景中有一个假人，这样任何对假人的点击都会改变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。

Answer 4

快速和脏的内联编辑（减去实际代码......太懒了）：

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

如何根据用户点击的位置隐藏/显示<div>标签？</div>

4 个答案: