javascript - Jquery replacewith 无法正常工作

Question

所以我有一个表，其中包含一个带有按钮的列。单击此按钮时，它会切换当前表格行的类，然后替换按钮。

$(document).ready(function() {

    $(".checkOut").click(function() {
        var currentRow = $(this).closest("tr");
        $(currentRow).removeClass("checkedIn");
        $(currentRow).addClass("checkedOut");
        $(this).replaceWith('<button title="Check In" class="checkIn" value="true" name="check_in"><img alt="Check In" src="../images/check.png"></button>');
    } );

    $(".checkIn").click(function() {
        var currentRow = $(this).closest("tr");
        $(currentRow).removeClass("checkedOut");
        $(currentRow).addClass("checkedIn");
        $(this).replaceWith('<button title="Check Out" class="checkOut" value="true" name="check_out"><img alt="Check Out" src="../images/minus.png"></button>');
    } );

});

初始点击似乎工作正常。但是，当我单击将状态更改回原始状态时，它似乎不起作用。我认为这是 replaceWith 的问题。非常感激任何的帮助!

Answer 1

因为您要动态添加“ checkin ”按钮(当您单击“ checkout ”按钮时)，所以您的点击事件监听器不会附加到它。您可以改用 live:

$(document).ready(function() {
    $(".checkOut").live("click", function() {
        //Your event handler code
    });

    $(".checkIn").live("click", function() {
        //Your event handler code
    });
}

两者都需要使用 live，因为在第一次替换之后，一个新的 .checkOut 元素会动态添加到页面中。