Javascript 使用jQuery添加可单击的表标题

我想用jQuery向表中添加一个可单击的标题。我这样加上：

$("table.table-legend").prepend('<caption class="edit-select"><a href="javascript:;">Select All - None</a></caption>');

及

还有其他一些方法，但不管怎样，我的函数都不会被调用。正确的方法是什么

$(document).on('click', '.edit-select a', function() {
    // do stuff
});

jQuery在运行时只知道页面中的元素，因此jQuery无法识别添加到DOM中的新元素。为了防止这种使用，将事件从新添加的项冒泡到DOM中的某个点，当jQuery在页面加载上运行时，该点就在DOM中。许多人使用

document

作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。理想的

请记住，在页面加载期间动态添加到DOM中的元素可以绑定到，而不依赖冒泡和委托，只要在包含元素后将事件绑定到这些元素。考虑以下内容：

将确保所有的孩子，现在和将来，都能得到

jQuery在运行时只知道页面中的元素，因此jQuery无法识别添加到DOM中的新元素。为了防止这种使用，将事件从新添加的项冒泡到DOM中的某个点，当jQuery在页面加载上运行时，该点就在DOM中。许多人使用

document

作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。理想的

请记住，在页面加载期间动态添加到DOM中的元素可以绑定到，而不依赖冒泡和委托，只要在包含元素后将事件绑定到这些元素。考虑以下内容：

将确保所有孩子，无论现在还是将来，都能得到。

$（“table.table legend”）.prepend（“”）；

这是实际的代码还是你只是复制了其中的一部分

您在锚定标记开始后的文本中有一个输入错误：href 选择器看起来不错

这是

编辑：

javascript调用的顺序很重要。在DOM中插入标题后，需要分配click事件； 这是实际的代码还是你只是复制了其中的一部分

您在锚定标记开始后的文本中有一个输入错误：href 选择器看起来不错

这是

编辑：

---

javascript调用的顺序很重要。在DOM中插入标题后，您需要分配click事件

我认为您遇到的问题是绑定的元素还不存在。为了验证这一理论，尝试绑定到body并通过更具体的方式进行过滤<代码>$（'body'）。在（'click'，'edit select a'，函数（）{console.log（'it worked'）；}）上拥有

href=“javascript:；”

属性有什么意义？只要在那里放一个

#

。这就是我一直看到的做法。我认为您遇到的问题是，您绑定的元素还不存在。为了验证这一理论，尝试绑定到body并通过更具体的方式进行过滤<代码>$（'body'）。在（'click'，'edit select a'，函数（）{console.log（'it worked'）；}）上拥有

href=“javascript:；”

属性有什么意义？只要在里面放一个

#

。这就是我一直看到的做法。我同意解决方案，但不完全同意你的解释。如果在新创建的元素创建之后选择它们（

$（“#new el'）

），JQuery将知道它们。否则，你是对的；）@blex你是对的-我在创建标题的语句之前有函数。我将它移动到了，之后它可以与$（'.edit select a'）@blex一起使用。请在将它动态添加到DOM后尝试选择一些内容，而不依赖于冒泡。您会发现jQuery不知道该元素，因为它在加载页面时运行，因此不知道动态添加的（通过JavaScript/jQuery）项。如果jQuery知道这些项，那么就不需要执行委派和依赖冒泡。@JayBlanchard您的逻辑是有道理的。但很抱歉我不同意。在创建元素之前选择（

$（'#elem'）

）元素不会将其作为目标。在这种情况下，您需要在回答时使用事件委派。但如果您在之后选择它，它会查找并找到它。作为证明：.Ah，但是fiddle使用了@blex，并且在click事件绑定到锚标记之前发生了前置。这是我所说的。我同意这个解决方案，但不完全同意你的解释。如果在新创建的元素创建之后选择它们（

$（“#new el'）

），JQuery将知道它们。否则，你是对的；）@blex你是对的-我在创建标题的语句之前有函数。我将它移动到了，之后它可以与$（'.edit select a'）@blex一起使用。请在将它动态添加到DOM后尝试选择一些内容，而不依赖于冒泡。您会发现jQuery不知道该元素，因为它在加载页面时运行，因此不知道动态添加的（通过JavaScript/jQuery）项。如果jQuery知道这些项，那么就不需要执行委派和依赖冒泡。@JayBlanchard您的逻辑是有道理的。但很抱歉我不同意。在创建元素之前选择（

$（'#elem'）

）元素不会将其作为目标。在这种情况下，您需要在回答时使用事件委派。但如果您在之后选择它，它会查找并找到它。作为证明：.Ah，但是fiddle使用了@blex，并且在click事件绑定到锚标记之前发生了前置。这是一个展示我所说的。

$('.edit-select a').on('click', function () { 

$(document).on('click', '.edit-select a', function() {
    // do stuff
});

var newKid = '<div class="kid">Jan</div>';
$('.parent').append(newKid);

$('.kid').click(function() {
    var kidName = $(this).html();
    var message = kidName + ' got clicked<br />';
    $('.whoGotClicked').append(message);
});

var newKid = '<div class="kid">Cindy</div>';
$('.parent').append(newKid);

$(document).on('click', '.kid', function() {...

$("table.table-legend").prepend('<caption class="edit-select"><a> href="javascript:;">Select All - None</a></caption>');