Question

我有一个django网站，里面有我自己编写的一些自定义js /小部件。要了解js代码：

$(document).ready(function() {
    $(".input_group_text_clear button").on("click", function (e) {
        data_action = $(this).attr('data-action');
        data_target = $(this).attr('data-target');
        $.each(data_target.split(':'), function(i, target) {
            $("#" + target).val("").trigger("change");
        });
        e.preventDefault();
    });
});

现在这非常有效，因为我只需要将这个js代码粘贴到django小部件，将其绑定到表单，代码包含在模板中。

问题在于我经常使用ajax发布表单，并且在失败时，通过json api返回包含错误/块的呈现形式。然后我＆＃34;替换＆＃34;包含错误的表单元素。

问题是我需要重新绑定控件;否则控制显然不会按计划工作。我通常做的是提取＆＃34; bind＆＃34;代码在全局函数中并从ajax / done处理程序调用，但我不是很喜欢它，因为你需要假设表单中有哪些控件，我的问题是，是否有这种元素替换的最佳实践与绑定js函数？

非常感谢帮助，保罗

Answer 1

你应该使用委托。您应该将其绑定到层次结构中较高的元素（不会被替换），而是将您的点击绑定到按钮本身，然后在on()的调用中使用selector参数来选择要绑定的实际元素。

所以，鉴于这个HTML：

<div id="container">
  <form>
     <div id="input_group_text_clear">
        <button>submit</button>
     </div>
  </div>
</div>

假设您的Ajax替换了<form>中的所有内容，您的代码应为：

$("#container").on("click", ".input_group_text_clear button", function (e) {
  ...
});

在ajax / replacement之后重新绑定js小部件的最佳做法？

1 个答案: