我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
当前回答
你可以使用
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
or
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
这两种方法是等效的,但具有不同的参数顺序。
请参见:jQuery委托事件
其他回答
使用jQuery的.on()方法http://api.jquery.com/on/将事件处理程序附加到活动元素。
从1.9版起,live()方法也被删除。
另一种解决方案是在创建元素时添加侦听器。不是将监听器放在主体中,而是在创建元素的瞬间将监听器放入元素中:
var myElement = $('<button/>', {
text: 'Go to Google!'
});
myElement.bind( 'click', goToGoogle);
myElement.append('body');
function goToGoogle(event){
window.location.replace("http://www.google.com");
}
以下是动态创建的元素不响应点击的原因:
var body=$(“body”);var btns=$(“按钮”);var btnB=$(“<button>B</button>”);//“<button>B</button>”尚未在文档中。//因此,`$(“button”)`给出`[<button>A</button>]`。//只有“<button>A</button>”才能获得单击侦听器。btns.on(“单击”,函数(){console.log(此);});//太迟了`<button>B</button>`。。。body.append(btnB);<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
作为一种解决方法,您必须聆听所有单击并检查源元素:
var body=$(“body”);var btnB=$(“<button>B</button>”);var btnC=$(“<button>C</button>”);//聆听所有点击和//检查源元素//是“<button></button>”。body.on(“单击”,函数(ev){如果($(ev.target).is(“按钮”)){console.log(ev.target);}});//现在您可以添加任何数字//“<button></button>”。body.append(btnB);body.append(btnC);<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
这被称为“事件委派”。好消息,这是jQuery中的内置功能:-)
变量i=11;var body=$(“body”);body.on(“单击”、“按钮”、函数(){var letter=(i++).toString(36).toUpperCase();body.append($(“<button>”+letter+“</button>”));});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
动态创建的元素上的事件绑定
单个元素:
$(document.body).on('click','.element', function(e) { });
子元素:
$(document.body).on('click','.element *', function(e) { });
注意添加的*。将为该元素的所有子级触发事件。
我注意到:
$(document.body).on('click','.#element_id > element', function(e) { });
它已经不起作用了,但它以前也起过作用。我一直在使用谷歌CDN的jQuery,但我不知道他们是否改变了它。
<html>
<head>
<title>HTML Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="hover-id">
Hello World
</div>
<script>
jQuery(document).ready(function($){
$(document).on('mouseover', '#hover-id', function(){
$(this).css('color','yellowgreen');
});
$(document).on('mouseout', '#hover-id', function(){
$(this).css('color','black');
});
});
</script>
</body>
</html>