Javascript 将click事件附加到尚未添加到DOM的JQuery对象

在将单击事件添加到DOM之前，我一直很难将其附加到JQuery对象

基本上我有这个按钮，我的函数返回，然后我把它附加到DOM中。我想要的是返回带有自己的点击处理程序的按钮。我不想从DOM中选择它来附加处理程序

我的代码是：

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

它是有效的。。。但不是为了我，不是我想要的

这似乎与对象还不是DOM的一部分这一事实有关

---

哦!！顺便说一句，我正在使用OpenLayers，我添加按钮的DOM对象是一个OpenLayers.FramedCloud（它还不是DOM的一部分，但一旦触发了几个事件就会成为DOM的一部分。）

是否使用.live为您工作

$("#my-button").live("click", function(){ alert("yay!"); }); 

编辑

从jQuery1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）

---

试试这个。。。。将主体替换为父选择器

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

---

用这个。您可以用dom ready上存在的任何父元素替换body

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

有关如何在1.7+版本中使用on（）取代live（）的更多信息，请参见此处

下面列出了您应该使用的版本

$（选择器）.live（事件、数据、处理程序）；//jQuery 1.3+

$（文档）.delegate（选择器、事件、数据、处理程序）；//jQuery 1.4.3+

$（文档）.on（事件、选择器、数据、处理程序）；//jquery1.7+

事件

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

或者在append之后添加事件

也许bind（）会有帮助：

button.bind('click', function() {
  alert('User clicked');
});

尝试：

使用.on（）并绑定到动态元素时，需要引用页面上已经存在的元素（如示例中的body）。如果可以使用更具体的元素来提高性能

事件处理程序仅绑定到当前选定的元素；他们 在代码调用.on（）时页上必须存在。 要确保元素存在并且可以选择，请执行事件 在文档就绪处理程序中为 页面上的HTML标记。如果新的HTML被注入到页面中， 选择元素并在创建新HTML后附加事件处理程序 放入页面中。或者，使用委派事件附加事件 处理程序，如下所述

---

Src:

jQuery.on方法用于绑定事件，即使页面加载中不存在元素。 这是你的电话号码 其使用方式如下：

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

---

在jQuery1.7之前。方法已被使用，但现在已弃用。

您必须附加它。使用以下内容创建元素：

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

var$div=$（“我的div”）；
$div.click（函数（）{alert（“clicked”）}）
返回$div；

然后，如果你附加它将工作

---

看看你的例子和一个简单的版本。

我真的很惊讶还没有人发布这个

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
}) 

如果您不确定此时该页面上将包含哪些元素，只需将其附加到

文档

---

注意：从性能角度来看，这是次优的-为了获得最大的速度，应该尝试连接到将要插入的元素的最近父元素。

为使用.on（）来侦听最近加载的表单元格内输入绑定的事件的人提供的信息补充；我通过使用delegate（）将事件处理程序绑定到这样的表单元格，但是.on（）不起作用

我将表id绑定到.delegate（），并使用了一个描述输入的选择器

e、 g

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

---

---

查看jquery的.on（），它用于在运行时附加事件处理程序。在创建元素时可以尝试绑定

click

。@AndrewPeacock绑定单击创建是什么意思？@danielrvt在创建结束时，执行类似

$（“#我的按钮”）。绑定（“单击”）我相信你需要在某个时候解开它。我对传单也有类似的问题。这似乎与贴图禁用单击传播有关。您的问题可能就是这样吗？.live（）已弃用并重新访问了。on（）如果动态加载我的按钮，这将不起作用。@j08691是的，这就是
live
、
delegate
和
on
@jbabey的要点。请阅读关于（）的文档。如果他的元素是动态创建的，则必须绑定到现有页面元素。“事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在于页面上。”@j08691是正确的，如果元素是动态创建的，它将不起作用。
click
是
bind（'click'）的缩写。
如果动态加载我的按钮，它将不起作用。这是正确的，但是，它只适用于悬停事件，而不适用于单击事件…我不确定我是否理解你的意思。on（）肯定与单击事件配合使用。我知道。。。它是如此罕见。。。当我使用：$（'body'）.on（'click hover'，'#my button'，function（）{console.log（'hello'）；}）时，它可以工作，但仅在hover上，如果我从上面删除“click”，它将与hover一起工作，但如果我离开“click”，它不会做任何事情……：（我不相信你能用on（）做到这一点。也许用bind你有这个选择，但用on（）你必须做一些类似于
$（'body'）的事情。在（{hover:function（）{}}）上，单击：function（）{}
查看我更新的答案和示例。这是我为测试“on”click而做的一把小提琴。“您可以用DOM ready上存在的任何父元素替换BODY"这是关键，谢谢你！不幸的是，这个解决方案并不理想，因为它需要我向正在侦听事件的元素添加一个ID。我希望
createMyButton
函数返回一个已经附加了事件侦听器的元素。这在JQuery中可能吗？@Ajedi32不一定-你只需要正确的IDcss选择器以您的元素为目标。您可以解释
$(document).on('click','#my-butt', function(){
   console.log('document is always there');
}) 

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});