Question

在将Click事件添加到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;     
}

返回的按钮无法捕获click事件。但是，如果我这样做（在将按钮添加到DOM之后）：

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

它有效......但不适合我，不是我想要的。

这似乎与该对象尚未成为DOM的一部分有关。

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

Answer 1

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

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

在这里查看http://api.jquery.com/on/以获取有关如何使用on（）的更多信息，因为它取代了1.7以上的live（）。

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

$（selector）.live（events，data，handler）; // jQuery 1.3 +

$（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3 +

$（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7 +

Answer 2

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

soundRecoreder.stop()

如果您不确定当时该页面上将包含哪些元素，请将其附加到stop。

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

Answer 3

试试这个....用父选择器替换身体

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

Answer 4

尝试：

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

<强> jsfiddle example

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

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

Src：http://api.jquery.com/on/

Answer 5

你必须追加它。使用以下命令创建元素：

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

然后，如果你附加它将起作用。

查看您的示例here和简单版here。

Answer 6

关于活动

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

或者在追加

后添加事件

Answer 7

使用.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

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

Answer 8

使用.live是否适合您？

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

http://api.jquery.com/live/

修改

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

http://api.jquery.com/on/

Answer 9

jQuery .on方法用于绑定事件，即使页面加载时没有元素。这是link 它以这种方式使用：

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

在jquery 1.7之前，使用了live()方法，但现在已弃用。

Answer 10

也许bind（）会有所帮助：

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

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

10 个答案: