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

因为您正在动态添加“检入”按钮（当您单击“检出”按钮时），您的点击事件监听器将不会附加到它。您可以改为使用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对象，而不是重新构造它。

此外，我添加了代码来缓存$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>');

    } );

Jquery replacewith无法正常工作

4 个答案: