2011-01-20 72 views
1

我正在通過JQuery解決方案的工作方式,大部分它的工作原理,但我看起來很小的細節,我知道我俯瞰。 ,也許我的執行/方法需要重新考慮。JQuery UnBind Works,嘗試「重新」綁定不

這裏有什麼工作流程。
1.單擊添加到一個表中的錨。
2.添加CSS類。
3.禁用(取消綁定)在preappend()後點擊
4.從動態添加記錄表中刪除基於ID的表。
5.刪除類在步驟2中添加。
6.綁定'點擊'

但是,雖然我可以綁定點擊和警報。預期的功能不允許我再次逐步完成上述過程。

有問題的代碼:

HTML樣本:
鏈接,啓動過程:該鏈接

<table id="carrier-table"><tbody></tbody></table> 

jQuery和自定義的點擊後持有的新記錄

<a href="#" class="view-carrier-scorecard"></a> 
<a href="#" class="view-carrier-trend"></a> 
<a href="#" class="view-carrier-insurance"></a> 
<a href="#" id="17053942" class="add-carrier-company"></a> 

表Javascript功能

<script type="text/javascript" id="removeCarrier"> 
    function removeCarrierFromList(obj) { 
     var i = obj.parentNode.parentNode.rowIndex; 
     document.getElementById('carrier-table').deleteRow(i); 
     $('a#' + obj.id).removeClass('delete-carrier-company'); 
     //alert(obj.id); //.hasClass('add-carrier-company').tostring()); // 

     $('a#' + obj.id).bind('click', function() { 
      //alert('User clicked on ' + obj.id); 
     }); 
    } 
    </script> 



<script type="text/javascript" id="carrierListJS"> 
    $(function() { 

     // Link 
     // This adds a carrier to a list 
     $('.add-carrier-company').click(
     function() { 

     var target = $(this).attr("id"); 
     alert(target); 
     $("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" + 
     "<td><a href='#' id='" + target + "' class='delete' onclick='removeCarrierFromList(this)'>&nbsp;&nbsp;&nbsp;&nbsp;</a></td>" + 
     "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" + 
     "</tr>"); 

     return false; 
     }); 

     $('.add-carrier-company').click(
     function() { $(this).addClass('delete-carrier-company').unbind('click'); } 
    ); 

    }); 
    </script> 
+0

僅供參考,如果你只需點擊進入/返回它不會創建一個新的行。您必須在上面一行的末尾添加兩個空格或按Enter/Return兩次。請務必檢查textarea問題下的帖子預覽,看看它發佈時的樣子。有關該點擊[這裏](http://stackoverflow.com/editing-help)的更多信息,或者點擊文本後的`?`按鈕。 – 2011-01-20 17:11:52

+1

這段代碼不會最終創建2個具有相同ID的錨標籤嗎?您的初始add-carrier-company標籤的ID爲17053942,表中預先添加的錨標籤也會具有相同的ID,對不對?當兩個元素具有相同的ID時,可能問題是試圖綁定基於ID選擇器的事件? – RussellUresti 2011-01-20 17:23:13

回答

0

我在代碼中注意到了一些問題。首先,正如@RussellUresti所提到的那樣,您可以使用相同的ID創建兩個標籤。另一方面,如果您在jQuery的選擇器中使用ID,請不要包含標記名稱,只需使用id(即使用$('#id')而不是$('a#id')),它會更快(它不會破壞您的代碼) 。

我創建了一個jsfiddle來回答你的問題(儘管我重寫了大部分內容)。 :)我認爲這是你要找的。

下面的代碼:
測試HTML

<a href="#" class="view-carrier-scorecard">aa</a> 
<a href="#" class="view-carrier-trend">bb</a> 
<a href="#" class="view-carrier-insurance">cc</a> 
<a href="#" id="10002" class="add-carrier-company">10002</a> 
<a href="#" id="10003" class="add-carrier-company">10003</a> 

<table id="carrier-table" style="border:1px solid #000"><tbody></tbody></table> 

的JavaScript

function addCarrier() { 
    var target = $(this).attr("id"); 
    $("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" + "<td><a href='#' id='a" + target + "' class='delete'>&nbsp;&nbsp;&nbsp;&nbsp;</a></td>" + "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" + "</tr>"); 
    $('#a' + target).click(removeCarrierFromList); 
    $(this).addClass('delete-carrier-company').unbind('click'); 
    return false; 
} 

function removeCarrierFromList() { 
    var $this = $(this); 
    var id = $this.attr('id').replace("a",""); 
    $this.closest('tr').remove(); 
    $('#' + id).removeClass('delete-carrier-company').click(addCarrier); 
} 

$(function() { 

    // Link 
    // This adds a carrier to a list 
    $('.add-carrier-company').click(addCarrier); 
});