在将单击事件添加到 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 之后):
$('#my-button').click(function () { console.log("yeahhhh!!! but this doesn't work for me :("); });
它有效......但不适合我,不是我想要的。
这似乎与该对象还不是 DOM 的一部分这一事实有关。
哦!顺便说一句,我正在使用 OpenLayers,并且我将按钮附加到的 DOM 对象是 OpenLayers.FramedCloud (它还不是 DOM 的一部分,但一旦触发了几个事件就会成为。)
用这个。您可以将 body 替换为 dom 就绪上存在的任何父元素
$('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()。
下面列出了您应该使用的版本
$(选择器).live(事件、数据、处理程序); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(事件、选择器、数据、处理程序); // jQuery 1.7+
$(选择器).live(事件、数据、处理程序); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(事件、选择器、数据、处理程序); // jQuery 1.7+