jquery on 的用法

Posted 2023-05-09

这有一段函数,不能动态的添加,该如何改成像on 那样的形式??

$('#maininfoframe').contents().find('.bs-glyphicons li a').click(
function ()
$('#myTab').find('li').removeClass('active');
$('#myTab').append('<li class="active" target="#maininfoframe">' + this.parentNode.innerhtml + '</li>');
);

.on()方法事件处理程序到当前选定的jQuery对象中的元素。
.on( events [, selector ] [, data ], handler(eventObject) )
events：类型: String
一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector：类型: String
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

data：类型: Anything
当一个事件被触发时，要传递给事件处理函数的event.data。

handler(eventObject)：类型: Function()
事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。 参考技术A $(document).ready(function() 
    $('#maininfoframe').on( 'click', '.bs-glyphicons li a', function() 
        $('#myTab').find('li').removeClass('active');
        $('#myTab').append('<li class="active" target="#maininfoframe">' + $(this).parent().html() + '</li>');
    );
);

参考技术B //如果你新增的li中不触发该事件，就用下面方法
$('#maininfoframe').contents().find('.bs-glyphicons li a').on("click",function () 
    $('#myTab').find('li').removeClass('active');
    $('#myTab').append('<li class="active" target="#maininfoframe">' + this.parentNode.innerHTML + '</li>');
);

//如果你新增的li中要出发该事件，用下面的方法
$('#maininfoframe').contents().on("click"," .bs-glyphicons li a".function()
    $('#myTab').find('li').removeClass('active');
    $('#myTab').append('<li class="active" target="#maininfoframe">' + this.parentNode.innerHTML + '</li>');
);

追问

//那我的代码是这样的,,貌似load一次就失效了

$(window).on('load', function () $('#maininfoframe').contents().on(...);););

追答

页面刷新后，你绑定的事件，没效果？

为什么load事件也选择用on呢

追问

.bs-glyphicons li a 是#maininfoframe 框架里面的对象,当#maininfoframe页面刷新了,父窗口就必须再重新load了,所以我不知道有没更好的办法

追答

父页面刷新后，load事件会重新加载，难道没有重新触发？

追问

没有 ,子框架刷新,不等于父框架刷新,不如看看该怎么样放到load函数外面?

追答

我现在算有点明白你想干嘛的。

子框架刷新的时候，让父框架也刷新。而不是父框架刷新的时候，让子框架刷新。

我理解的对吗？

如果是第一个，我以前的做法是通过this.Parent来找到父页面，然后强制其执行load方法。
如果this.Parent找不到父页面。那么我会在父页面跳转子页面之前，把父页面对象保存起来。

追问

额,,我也想过这么做,就是做不出来,,要不加下我扣,就是用户名

本回答被提问者和网友采纳

jQuery中delegate与on的用法与区别

在jQuery1.7中 .delegate()已被.on()取代。对于早期版本，它仍然使用事件委托的最有效手段。
在事件绑定和委派，delegate()和on在一般情况下，这两种方法是等效的。

.delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

 

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );

例如：.delegate()  code:

 

 

$("table").delegate("td","click",function(){
	alert("hello");
});

.on()  code:

$("table").on("click", "td", function() {
        alert("hi");
});

PS: 两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如

 

 

$("table").delegate("button","click",function(){...});
$("table").on("click", "p", function(){...});

就不起作用，因为正常情况下，table子元素应为tr,td...

 

on(events,[selector],[data],fn)，参数[selector]是可选，
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如：

$("table").on("click", ".td1", function() {
       alert("hi");
});

过滤class为td1的table子元素

而delegate的selector是必需的。

 

 

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow