Jquery 更換無法正常工作

Question

所以我有一個表，其中包含一個帶有按鈕的列。 單擊此按鈕時，它將切換當前表格行的 class，然后替換該按鈕。

$(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>');
    } );

});

最初的點擊似乎工作得很好。 但是，當我單擊將 state 更改回原來的狀態時，它似乎不起作用。 我認為這是replaceWith的問題。 非常感激任何的幫助！

Answer 1

因為您正在動態添加 Check In 按鈕（當您單擊 Check Out 按鈕時），所以您的 click 事件偵聽器不會附加到它。 您可以使用live代替：

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

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

兩者都需要使用live ，因為在第一次替換之后，一個新的.checkOut元素會動態添加到頁面中。

Answer 2

$(document).ready(function() {
    $(".checkOut").live('click', function() {
        var $this = $(this),
            $currentRow = $this.closest("tr");
        $currentRow
            .removeClass("checkedIn")
            .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").live('click', function() {
        var $this = $(this),
            $currentRow = $this.closest("tr");
        $currentRow
            .removeClass("checkedOut")
            .addClass("checkedIn");
        $this.replaceWith('<button title="Check Out" class="checkOut" value="true" name="check_out"><img alt="Check Out" src="../images/minus.png"></button>');
    });
});

1. 您必須使用.live()將處理程序附加到與當前選擇器匹配的所有元素的事件，現在和將來。

2. 您對變量currentRow進行了不必要的重建。 我添加了一個$符號，所以您知道它已經是 jQuery object，而不是重新構建它。

此外，我添加了緩存$currentRow和$this對象的代碼，因此您不必每次想要操作它們時都查找 DOM。

Answer 3

您可以更改屬性值，而不是替換，這將保留您附加到按鈕的事件處理程序。

$(document).ready(function() {

    $(".checkOut").click(function() {
        $(this).closest("tr").removeClass("checkedIn").addClass("checkedOut");
        $(this)
         .attr({ title: "Check In", class: "checkIn", value: "true", name: "check_in" })
         .find("img").attr({ src: "../images/check.png", alt: "Check In" });
    } );

    $(".checkIn").click(function() {
        $(this).closest("tr").removeClass("checkedOut").addClass("checkedIn");
        $(this)
         .attr({ title: "Check Out", class: "checkOut", value: "true", name: "check_out" })
         .find("img").attr({ src: "../images/minus.png", alt: "Check Out" });
    } );

});

Answer 4

現有答案的替代方案是一個處理程序，用於簽入和簽出：

$(".checkIn, .checkOut").live('click', function() {
        var $this = $(this),
            $currentRow = $this.closest("tr"),
            checking = $this.hasClass("checkIn"),
            classToAdd = ckecking ? "checkedOut" : "checkedIn",
            classToRemove = ckecking ? "checkedIn" : "checkedOut",
            buttonTitle = checking ? "Check Out" : "Check In",
            buttonName = checking ? "check_out" : "check_in",
            imgSrc = checking ? "minus" : "check";

        $currentRow.removeClass(classToRemove) .addClass(classToAdd);
        $this.replaceWith('<button title="'+buttonTitle+'" class="'+classToAdd+'" value="true" name="'+buttonName+'"><img alt="'+buttonTitle+'" src="../images/'+imgSrc+'.png"></button>');

    } );