Javascript 在ajax/替换之后重新绑定js小部件的最佳实践？

我有一个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返回。然后，我将表单元素“替换”为包含错误的元素

问题是我需要重新绑定控件；否则，控件显然无法按计划工作。我通常做的是提取全局函数中的“bind”代码，并从ajax/done处理程序调用它，但我并不喜欢它，因为您需要假设表单中有哪些控件，我的问题是，是否有将这种元素替换与绑定js函数相结合的最佳实践

非常感谢您的帮助，

---

保罗

你应该使用授权。与其将单击绑定到按钮本身，不如将其绑定到层次结构中更高的未被替换的元素，然后在调用

on（）

中使用选择器参数来选择要绑定到的实际元素

因此，考虑到以下HTML：

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

---

谢谢你的评论，丹尼尔。我还找到了一个选项，设置“self.helper.include_media=True”（我正在使用django crispy表单呈现表单）。这有效地将javascript代码与表单/html一起提供，并在最初运行它，因此我不需要自己手动触发任何东西。。。。我不确定这是否适用于所有浏览器，但至少chrome可以。

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