JQuery对新元素没有影响
html的一部分被替换为ajax调用的结果。在测试期间,我让ajax调用与被替换的完全相同的东西。问题是,我没有应用于旧HTML的JQuery UI和“onClick”材料适用于新的。我试着回想一下再次应用它的功能,但它不起作用。奇怪的是,如果我直接将它输入到谷歌浏览器的建议中(新的Ajax-html受JQuery命令影响),它会起作用。JQuery对新元素没有影响
这是我的代码,其中包括HTML的在开始(工作)原设置和第二设置(所有需要的元素已经被实例化后,它来了。):
function set_up() { // <-- if I call this function in the consul, it works.
$('.delete-button').click(function() {
var confirm = window.confirm("Are you sure you want to delete? After you save, this file will not be recoverable.")
if (confirm){
$(this).parent('.deletable-group').remove()
}
});
$('.field-default[data-multi="True"]').makeMulti();
$("input.field-input-date").datepicker();
alert("HERE!") //Is reached both times I call the function. So the code above is executing.
}
var options = {
target: '.server-response-box',
success: function() { //<--- Gets called when the ajax call goes through.
$('.needs-update').each(function(index) {
url = "/field/1/" + $('.edit-wrapper').attr('data-entry-ID') + "/" + $(this).attr('data-field-id');
old_this = this
$.get(url,function(data){
$(old_this).replaceWith(data);
});
});
set_up(); // Tries to set everything up again.
},
beforeSubmit: function(arr, $form, options) {
}
};
$('#form').ajaxForm(options);
set_up(); //<-- sets it all up the first time.
set_up(); // Tries to set everything up again.
这条线你给ajaxForm成功回调函数后应只执行内部你所有的GET
请求都会执行。
var getRequests = [];
$('.needs-update').each(function(index) {
url = "/field/1/" + $('.edit-wrapper').data('entry-ID') + "/" + $(this).data('field-id');
old_this = this;
var ajaxGet = $.get(url,function(data){
$(old_this).replaceWith(data);
});
getRequests.push(ajaxGet);
});
$.when.apply($, getRequests).done(set_up); // Tries to set everything up again.
这样做是创建延迟对象的数组,你的所有GET
的要求,当他们完成时,set_up
函数被调用。
编辑 - 更改使用.attr(data-stuff)
只需.data(stuff)
。请注意,.data()
会将值转换为字符串/数字/布尔值,但在这种情况下,它将全部连接到字符串。将以下内容复制并粘贴到控制台中以查看。
$(this).data('id', 1);
var x = "test" + ($(this).data('id') + $(this).data('id'));
var y = "test" + $(this).data('id') + $(this).data('id');
console.log(x); // "test2"
console.log(y); // "test11"
为什么它不能在外面工作?不在里面的原因是因为添加了多个,所以我认为最后这样做会更有效率。 –
你确定$ .when在一系列被攻击的对象上工作吗? –
@roasted调整,使其工作,感谢指出。 –
对于动态添加的内容,您需要使用委派的事件侦听器。查看jQuery的文档on()了解更多详情。
喜欢的东西:
$(document).on('click', '.delete-button', function() {...});
UPDATE
正如其他人所指出的那样,$.get()
是异步的。一旦所有的调用都完成,你就调用了set_up(),但不一定在它们返回之后。要做到这一点,跟踪有多少人使用计数器返回,然后调用SET_UP()一次他们都齐全:
var needsUpdate = $('.needs-update');
var numberToUpdate = needsUpdate.length;
var numberUpdated = 0;
needsUpdate.each(function(index) {
url = "/field/1/" + $('.edit-wrapper').attr('data-entry-ID') + "/" + $(this).attr('data-field-id');
old_this = this
$.get(url,function(data){
numberUpdated++;
$(old_this).replaceWith(data); //update HTML
if(numberUpdated === numberToUpdate) {
setup(); //when all HTML added, then initialize widgets and add listeners
}
});
});
将事件处理程序附加到通过ajax添加的内容是合法的,不需要委派监听程序 –
我有一个类似的问题在这里相同的答案http://*.com/questions/4208219/how-to-do-following-mask-input-problem/10203361#10203361 –
谢谢,但只解决了点击部分。 datepicker和.makeMulti怎么样? –
如果你的jQuery的旧版本(如1.6及以上),请尝试使用
$(element).live("event", function(e) {
bla bla bla;
});
使用'$(文件)。在( '点击', '.delete按钮',函数使用'.on()'将一个click事件绑定到所有当前和将来的'.delete-button'元素上,除非你想让整个'set_up()'再次运行, case使用Brad M的解决方案 – Joe
它看起来像是在替换发生之前调用set_up() –