Question

非常感谢你的帮助:)

我的项目是HTML和javascript，我需要创建一个按钮，一旦点击，它将被另一个按钮取代，一旦点击它，按钮出现也将被上一个按钮取代。

这是我的javascript代码和HTML。

<html>
<body>
    <div id="container">
        <button id="create">create</button>
    </div>
    <script>
        $('#create').click(function() {
            $('#container').html('<button id="again">again</button><button id="cancel">cancel</button>');
        });

        $('#again').click(function() {
            $('#container').html('<div><button id="create">create</button></div>');
        });

        $('#cancel').click(function() {
            $('#container').html('<div id="cancel">cancel</div>');
        });
    </script>
</body>
</html>

或尝试此链接：http://codepen.io/enrison09/pen/hwlBA

提前谢谢你！：）

Answer 1

您的代码存在的问题是，click函数仅将事件处理程序设置为调用它时可用的DOM元素。这意味着您将无法将其用于之后添加到DOM中的任何内容。

解决方法是使用on（）函数，如下所示：

$(document).on('click', '#create', function() {
  $('#container').html('<button id="again">again</button><button id="cancel">cancel</button>');
});

$(document).on('click', '#again', function() {
  $('#container').html('<div><button id="create">create</button></div>');
});

$(document).on('click', '#cancel', function() {
  $('#container').html('<div id="cancel">cancel</div>');
});

on()适用于动态添加到DOM的元素。

在此处查看您的示例：http://codepen.io/anon/pen/rLjki

但是，有更好的方法可以做到这一点（比如在DOM中一直使用所有需要的按钮，只是切换哪些是可见的，哪些不在哪个阶段）。

Answer 2

如何隐藏和显示它们而不是删除和创建？

<div id="container">
    <button style="display:none" id="again">again</button>
    <button id="create">create</button>
</div>
<script>
    $("#create").click(function () {
        if($('#create').html()=='create'){
            $('#again').show();
            $(this).html('cancel')
        }
        else{
            $('#again').hide();
            $(this).html("create");
        }        
    });
</script>

http://jsfiddle.net/8at2nbx7/

Answer 3

您可以使用这样的结构：

var $create = $('<button id="create">create</button>');
var $again = $('<button id="again">again</button>');
var $cancel = $('<button id="cancel">cancel</button>');

$('body').on('click', '#create', function() {
  $(this).remove();
  $('#container').append($again).append($cancel);
});

$('body').on('click', '#again', function() {
  var $parent = $(this).parent();
  $parent.find('button').remove();
  $parent.append($create);
});

$('body').on('click', '#cancel', function() {
  var $parent = $(this).parent();
  $parent.find('button').remove();
  $parent.append($cancel);
});

on函数替换为jQuery v1.7 +：http://api.jquery.com/on。

流程顶部的“创建”按钮可降低内存成本和DOM工作。

单击同一个div时，HTML按钮会变为另一个按钮

3 个答案: