jquery的綁定和取消綁定不帶功能

Question

目的

• A區分被點擊。
• 該部門的內容更改爲表單字段以更新它。
• 的「點擊」事件是這樣的表單字段取出並按鈕可以單擊
• 與使用$("#x").load
• 的數據通過$.post和形式保存從數據庫默認值等產生的形式被除去和更換新的價值。
• 該部門現在應該變成可點擊的再次<問題

我到目前爲止已經試過......

我有很多與多個部門的「數據 - ？」屬性用於不同的用途。我會保持我的例子簡單

<div class="profile_value" id="div1" data-id="1" data-name="john"> 
    <span id="field1">John</span> 
</div> 
<div class="profile_value" id="div2" data-id="2" data-name="alan"> 
    <span id="field2">Alan</span> 
</div> 

USING .ON（）; - 問題是解除綁定

$("body").on("click", ".profile_value", function(){ 
    var pid = $(this).data("id"); 
    var name = $(this).data("name"); 
    $("#field"+pid).load("ajax/form/etc.etc.php"); 
    //now i can't seem to unbind the click with this method 
    //i've tried $(this).off("click"); 
} 

所以被點擊的VIA與數據庫中的數據加載AJAX表單字段情況下，也只是再次重新加載的形式作爲另一個「點擊」被觸發。

USING .CLICK（）; - 問題是重新結合

有了這個，第1個部分作品完美...

$(".profile_value").click(function(){ 
    var pid = $(this).data("id"); 
    var name = $(this).data("name"); 
    $("#field"+pid).load("ajax/form/etc.etc.php"); 
    $(this).off("click"); //this works 
}); 

然後當表單提交（通過AJAX），成功就成功地消除了表格，並顯示新數據。但是，這次我無法重新綁定點擊。

我試過.bind("click")以各種方式指向它的#ID和.on("click");。沒有運氣！

注意：文檔顯示示例，但都帶有外部功能。我在很多部門都使用這個功能，所以功能看起來不太合適（我可能是錯的）

注2： SO上的其他答案也顯示了許多例子， 。

Answer 1

的問題是，你的事件處理程序通過委託觸發 - 直到它擊中了body事件傳播了DOM ，然後觸發。 .profile_value元素實際上並沒有將事件直接綁定到它們上，所以使用.off('click')對個別元素不起作用。

使用$('body').off('click', '.ele')會從所有元素中刪除處理程序，但這並不理想。

一個簡單的解決方案是附加一個新的處理程序，用於停止click事件的傳播。您甚至可以使用它來讓用戶知道該元素已被點擊。

DEMO

$('body').on('click', '.ele', function (e) { 
 
    console.log('Clicked!'); 
 
    $(this).on('click', function (e) { 
 
    e.stopPropagation(); 
 
    console.log('New click handler, that stops propagation to the old handler.'); 
 
    }); 
 
}); 
 

 
$('.rebind').on('click', function() { 
 
    $('.ele').off('click'); 
 
    console.log('A general rebind.'); 
 
});

.ele { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    
 
    background-color: pink; 
 
} 
 

 
.rebind { 
 
    display: block; 
 
}

<div class="ele"></div> 
 
<div class="ele"></div> 
 
<div class="ele"></div> 
 
<div class="ele"></div> 
 
<div class="ele"></div> 
 

 
<button class="rebind">Rebind them all</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

要 '重新綁定' 委派的處理程序上的單個元件使用.off('click')。

閱讀材料：

• MDN
• jQuery API

Answer 2

我不知道你在做什麼，但是從代理監聽器解除綁定處理程序，你可以使用這..

Fiddle demo

<div class="profile_value" id="div1" data-id="1" data-name="john"> 
    <span id="field1">John</span> 
</div> 
<div class="profile_value" id="div2" data-id="2" data-name="alan"> 
    <span id="field2">Alan</span> 
</div> 

var profile_click_handler = function() { 
    var target = $(event.currentTarget); 
    alert("clicked"); 
    setTimeout(function() { 
     $("body").off("click", ".profile_value", profile_click_handler); 
     console.log("clicked off", target); 
     alert("click unbound"); 
    }, 2000); 
}; 
$(document).ready(function() { 
    $("body").on("click", ".profile_value", profile_click_handler); 
}); 
window.rebind = function() { 
    $("body").on("click", ".profile_value", profile_click_handler); 
} 

Answer 3

另一個參數添加到您的部門：

<div class="profile_value" id="div1" data-id="1" data-click="0" data-name="john"> 
    <span id="field1">John</span> 
</div> 

每次新的部門創建他們將有data-click="0"，但點擊時會變爲data-click="1" 。這樣你可以檢查分部是否被點擊過。這是否有道理，或者我完全錯過了你的問題？

Answer 4

好它看起來或者是我無法描述清楚我的問題，或者每個人都簡單地奔波或勞累:)

我已讓形式解決它出現在另一個部門的.profile_values DIV後立即所以不再需要綁定解除綁定。我只需要hide()點擊div並在表單提交後再次顯示。

這是我解決這個惱人的綁定，解除綁定，重新綁定-ON-OFF-現場