單擊同一div時，HTML按鈕變為另一個按鈕

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 個解決方案

解決方案1
1 已采納 2014-10-19 01:49:55

解決方案2
1 2014-10-19 02:02:06

解決方案3
0 2014-10-19 01:57:23

單擊同一div時，HTML按鈕變為另一個按鈕

問題描述

3 個解決方案

解決方案1 1 已采納 2014-10-19 01:49:55

解決方案2 1 2014-10-19 02:02:06

解決方案3 0 2014-10-19 01:57:23

解決方案1
1 已采納 2014-10-19 01:49:55

解決方案2
1 2014-10-19 02:02:06

解決方案3
0 2014-10-19 01:57:23