不会对动态加载的数据进行 onclick 事件更改
Change is not made onclick event on the data loaded dynamically
这是从php文件动态加载数据的代码:
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='demo/img/ajax-loader.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "pagination/load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container2").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container2").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container2 .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
}); });
此代码成功运行并给出输出。现在我想在动态加载的数据上添加一个 onclick
事件,为此代码是:
function favourites(gymusernamefav){
$("#container2 .shortlisted").html("hello");
$.ajax
({
type: "POST",
url: "http://fvilla.in/markfavourite.php",
data: 'gymusernamefav='+ gymusernamefav,
success: function(html)
{
$("#container2").ajaxComplete(function(event, request, settings)
{
$("#container2 .shortlisted").html("hello");
});
}
});
}
$('#container2 .shortlisted').live('click',function(){
var gymusernamefav = $(this).attr("id");
favourites(gymusernamefav);
return false;
});
此代码也成功运行,但未在 中进行更改
$("#container2 .shortlisted").html("hello");
onClick
之后,不会对类.shortlisted
进行任何更改(仅更改几秒钟,之后会看到旧文本)但是 ajax 部分已成功运行,并且还会执行查询。
感谢任何帮助。
对动态加载和生成的元素使用事件委托:
$(document).on('click','#container2 .shortlisted', function(){
favourites($(this).attr("id"));
return false;
});
请尝试这个
$(document).delegate("#container2 .shortlisted", "click", function() {
var gymusernamefav = $(this).attr("id");
favourites(gymusernamefav);
return false;
});
delegate() 方法为作为选定元素的子元素的指定元素附加一个或多个事件处理程序,并指定事件发生时要运行的函数。使用 delegate() 方法附加的事件处理程序将适用于当前和 FUTURE 元素(如脚本创建的新元素)。
从 jQuery 版本 1.7 开始,on() 方法是为选定元素附加事件处理程序的首选方法。
从jQuery 1.7开始,.live()方法已被弃用。使用 .on() 附加事件处理程序。使用旧版本的 jQuery 的用户应优先使用 .delegate() 而不是 .live()。
委托事件的优点是,它们可以处理以后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素,可以使用委托事件来避免频繁附加和删除事件处理程序的需要。
当你处理新的 DOM(由 js 动态添加)时,你应该使用 on() 的事件委托而不是不推荐使用的方法 live():
$('body').on('click','#container2 .shortlisted', function(){
希望这有帮助。
对于新创建的元素,您可以使用:
$(document).on('click', '#container2 .shortlisted', function(){ .............. 你的代码...});
在以前的jQuery版本(1.7)中,你可以使用live()
尝试将选择器从以下位置更改:
$("#container2 入围")
自:
$("#container2.入围")
选择器中的两个元素之间没有空格,否则您正在寻找 container2 的子元素,并入围类。
- 如何在执行此特定onclick事件时执行JavaScript函数
- 如何调用“;链接_;在onclick事件上使用Javascript
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 选择onclick事件jquery
- 执行php函数的onclick事件的其他替代方案
- 动态创建OnClick事件Javascript
- onClick事件未触发reactjs
- 使用java脚本更改onClick事件中菜单选项卡的颜色
- 如何使用OnClick事件通过参数调用来调用PHP函数
- 使用jQuery动态添加onClick事件
- onclick事件不'不要在萤火虫或铬中点火
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- xPages标签onclick事件不'不要在空白处工作
- 用beautifulsoup-python调用onclick事件
- 使用JavaScript将onclick事件与参数绑定
- 使用onClick事件扩展Aviarc容器小部件
- 在按钮的onclick事件上将字符串传递给JavaScriptFuntion
- 用于显示onclick事件计数的可调整跨度标记
- Javascript onclick事件在第一次单击时未启动
- 如何使用onclick事件触发此代码.我尝试过,但失败了