Question

我有三个按钮，我试图在.click（）上互相交换：“播放”，“暂停”和“恢复”。第一个按钮交换适用于#play - ＆gt; #pause，但之后#pause按钮没有响应。

任何帮助将不胜感激！

$("#start").click(function() {
    $("#start").replaceWith("<button id=\"pause\">Pause</button>");
});

$("#pause").click(function() {
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>");
});

$("#resume").click(function() {
    $("#resume").replaceWith("<button id=\"pause\">Pause</button>");
});

Answer 1

我只是更改文本，可能会添加data-属性来告诉我有关当前状态的更多信息，因为未来版本中的文本可以与本地化交换。

<button class="btn-action" data-action="pause">Pause</button>

然后

$(".btn-action").click(function() {
    var currentAction = $(this).data("action"),
        nextAction = "";

    switch (currentAction)
    {
      case "play": nextAction = "pause"; break;
      case "pause": nextAction = "resume"; break;
      case "resume": nextAction = "play"; break;
    }

    $(this).text(nextAction).data("action", nextAction);
});

如果您有本地化设置，则可以轻松地将text()换成

之类的内容

$(this).text(actionLocalization[nextAction])

当您重复自己时，

始终怀疑自己的代码 ......

以下是一个简单示例：http://jsbin.com/ehonob/1/edit/

Answer 2

首先，您可能不希望一直重新创建DOM元素。首先在HTML中包含所有内容，然后隐藏并显示您需要的内容。

http://jsfiddle.net/YzVJN/4/

$("#start").click(function() {
    $("#start").hide();
    $("#pause").show();
});

$("#pause").click(function() {
    $("#pause").hide();
    $("#resume").show();
});

$("#resume").click(function() {
    $("#resume").hide();
    $("#pause").show();
});

如果你想重新创建DOM元素，每次都要使用新元素，所以在第一次运行脚本时选择$("resume")不会返回任何内容 - 在这种情况下，请执行以下操作：其他人建议并使用类似on('click', '#pause', ...)的内容。

Answer 3

您可以将on()与事件委派一起使用：

$("body").on("click", "#start", function() {
    $(this).replaceWith("<button id=\"pause\">Pause</button>");
}).on("click", "#pause", function() {
    $(this).replaceWith("<button id=\"resume\">Resume</button>");
}).on("click", "#resume", function() {
    $(this).replaceWith("<button id=\"pause\">Pause</button>");
});

注意，您可以使用任何其他 static 父元素代替body。

DEMO： http://jsfiddle.net/YzVJN/5/

Answer 4

问题是您在设置绑定时不存在元素。

您需要使用“live”，“delegate”或“on”，如下所示：

$(document).on("click", "#pause", function() {
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>");
});

Answer 5

如果你真的想删除并添加元素，那么每次都可以这样做并重新注册处理程序。

$("#start").click(function() {
    $("#start").replaceWith("<button id=\"pause\">Pause</button>");
    $("#pause").click(function() {
        replaceWithResume();
    }); 
});

function replaceWithResume(){
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>");
    $("#resume").click( function() { replaceWithPause() } );
}

function replaceWithPause(){
    $("#resume").replaceWith("<button id=\"pause\">Pause</button>");
    $("#pause").click( function() { replaceWithResume() } );
}

更换.click（）上的按钮？

5 个答案: