我正在制作一个可以通过AJAX加载新设置页面的东西,我不确定将监听器绑定到这些来自新内容页面的元素的最有效方法是什么?
我的想法是,我可以编写一个比较文件路径的函数,并为每个条件应用正确的监听器,以便根据AJAX加载的页面将这些新元素进行分类。如果我有大量页面,我觉得这将使函数变得非常庞大。
谢谢!
我正在制作一个可以通过AJAX加载新设置页面的东西,我不确定将监听器绑定到这些来自新内容页面的元素的最有效方法是什么?
我的想法是,我可以编写一个比较文件路径的函数,并为每个条件应用正确的监听器,以便根据AJAX加载的页面将这些新元素进行分类。如果我有大量页面,我觉得这将使函数变得非常庞大。
谢谢!
两种方式:
1)使用.on()
绑定到非动态父容器
$('.some-parent-class').on('click', '.element', function() {
// DO STUFF!
});
2) 在 ajax 调用完成后绑定新元素
$.ajax(url, {
// ajax options
}).done( function(data) {
var newEl = $('<div class="element"></div>');
// Setup your newEl with data here...
newEl.on('click', function() {
// do stuff
});
newEl.appendTo($('.some-parent-class'));
});
前者通常会导致更快的 AJAX 响应时间,但可能会减慢点击响应速度。
.element
元素 (比如之前的 AJAX 请求),那么会发生什么?你会绑定两个事件。选择器应该更具体(或者只适用于 AJAX 请求的响应)。 - Iandata
来执行多种操作,并选择绑定事件的目标。 - Ian$(document).on('event', 'elementIdentifier', function(){
//your code
});
$(".parent-div").on("click", ".child-div-class-name" ,function(){
somefunction();
});
所有在.parent-div
内部新插入的元素都将具有onclick
监听器。
在Populus的回答基础上,我想补充一点。他的回答已经很好了,但是第二个选项的逻辑等效解决方案是使用Promises:
var iGotYou = new Promise(function (res, rej) {
$.ajax({
//ajax paramaters
})
.done(function( data ) {
//handle the data as necessary...
//then resolve the Promise
res();
});
});
//the Promise has been resolved
iGotYou.then(function (response) {
//add the event listener now that the promise has been fulfilled
document.getElementById('someId').addEventListener('click', function (e) {
//whatever you want to do on click event
});
})
我不太确定你在这里问什么,但是你可以使用jQuery的.on()函数来绑定已经存在于文档中的元素,或者将来会存在的元素。
这里有一个快速的例子:
$(document).ready(function () {
$(document).on('click', '#new-button', function() {
alert("You clicked the new button");
});
//get some HTML via ajax. Let's assume you're getting <button id="new-button">Click me</button>
$.get('url', function(res) {
$('body').append(res);
});
});