Question

目标

点击一个部门。
该分部的内容更改为表单字段以进行更新。
＆＃34;点击＆＃34;事件被删除，因此可以单击表单字段和按钮
使用$("#x").load
数据通过$.post保存，表单将被删除并替换为新值。
该部门现在应该再次点击＆lt;问题

到目前为止我已尝试过......

我有很多与多个＆＃34;数据的分歧 - ？＆＃34;不同用途的属性。我会让我的例子简单

<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>

使用.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");
}

因此，即使单击通过ajax加载来自数据库的数据的表单字段，它也会再次重新加载表单作为另一个＆＃34; click＆＃34;触发了。

使用.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上的其他答案也会显示很多示例，但都包含所有功能，只有一个可点击的按钮或div。

Answer 1

问题是您的事件处理程序是通过委托触发的 - 事件向上传播直到它到达body，然后触发。 .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')。

阅读材料：

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之后立即显示在另一个分区中来解决它，因此不再需要绑定unbind。我只是hide()点击的div，并在提交表单后再次显示。

这是我解决这个烦人的绑定 - 解绑 - 重新开启 - 现场

的解决方案

jquery绑定和unbind没有函数

4 个答案: