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

$(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 2

因爲您正在動態添加「簽入」按鈕（當您單擊「簽出」按鈕時），您的點擊事件偵聽器將不會附加到它。你可以使用live代替：

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

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

您將需要使用live兩個，因爲第一次更換後，新.checkOut元素被動態地添加到頁面。

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>'); 

    });