Javascript 将单击事件绑定到通过AJAX加载的内容，而不进行委派？

我遇到这样一种情况：我在站点的特定部分的许多情况下使用名为

data命令的
属性，而不是绑定成吨的单独单击事件，我决定只使用一个，并使用一个开关，例如：

$('[data-command]').on('click', function(event) {

    // Prevent default click action
    event.preventDefault();

    // Get command
    var command = $(event.target).data('command');

    switch (command) {
        // Do stuff...
    }

    // Prevent default click action (IE 8)
    return false;

});

然而，当试图让它在通过
AJAX
加载的数据上工作时，它就成了一个问题

这显然有效

$('#existing_element').on('click', '[data-command]', function(event) {

…但是，由于它应该在该站点的该部分的许多不同页面上工作，因此上述内容不能在所有页面上工作

我可以确保为加载所有ajax数据的父包装器提供一个特定的
id
，但这意味着用一堆相同的代码生成两个单独的绑定事件

我也可以这样做，以涵盖所有基地

$(document).on('click', '[data-command]', function(event) {

…但将元素绑定到文档可能不是一个明智的想法

Edit:Html数据通过jQuery的
Html
方法加载到
DOM

有什么干净的方法可以处理这个问题，还是应该创建两个不同的绑定事件来处理每种情况？
事件委派是在动态创建的元素上绑定事件的最佳方法。因为您不想使用事件委派，所以请使用以下方法绑定事件

$('[data-command]').off('click').on('click', clickHandler);

// Somewhere in the same scope
function clickHandler(e) {
    // Handle click event here
}

在使用
html（）
添加动态创建的元素后添加此项

off（'click'）
将首先解除先前应用的click事件处理程序的绑定，然后
on（'click'），
将绑定与选择器匹配的所有元素上的click处理程序


编辑

这似乎是重复相同的代码一次又一次。我不能保持干燥吗

是的，您可以通过创建绑定事件的函数并在需要绑定事件时调用相同的函数来保持代码的干净利落

function clickHandler(e) {
    // Handle click event here
}

function bindEvent() {
    $('[data-command]').off('click').on('click', clickHandler);
}

$(document).ready(bindEvent);

...

$.ajax({
    ...
    success: bindEvent
....

你能添加AJAX的代码以及在DOM中添加元素的方式吗？
。但是，将元素绑定到文档中可能不是一个明智的想法。
-确切的原因是什么？@raina77ow-我从中得到的是应该避免。“我可以确保为父包装器提供一个特定的id…，但这意味着要生成两个单独的绑定事件…”为什么这需要两个事件？这不起作用吗：
$（''）。在（'click'，'[data command]'上，函数（event）{…}）
当动态创建/删除正在捕获事件的对象，并且您仍然希望捕获这些对象上的事件，而不必每次创建新的事件处理程序时都显式地重新绑定事件处理程序时，您的情况是否与…
相同？这基本上不就是绑定元素两次，就像您所说的将此代码添加到通过
html
？我正在尝试找出一种方法将所有内容绑定到同一事物中。@Brett这不会为元素绑定两次事件，如果先删除前一个绑定事件，然后绑定新事件。要对所有元素只执行一次相同的操作，您需要使用事件委派。抱歉，用词不当。What我的意思是两次使用同一代码两次，而不是绑定两次。就像我可以很容易地使用和不使用事件委托绑定它一样，但这只意味着重复代码，这就是我使用此方法所要做的。@Brett请检查更新并让我知道您的评论