如果我有以下html:
<html>
<div id="main_content">
<button>click me</button>
<script src="main.js" ></script>
</div>
</html>
和main.js:
$('#main_content').on('click', 'button', function() {
console.log('you clicked');
});
如果我执行整页加载,则单击该按钮仅注册一个控制台消息.但是,如果我随后main_content's通过AJAX请求重新加载内容,则每次单击按钮都会发出2条控制台消息.它将为每个后续的AJAX加载提供3,4,5 ...消息,但总是一个用于整页重新加载.
有人可以解释这种行为并提出可行的解决方案吗？
我知道.live是折旧的,最近我正在更新页面并意识到我正在使用.live我想切换到.on但不明白要改变什么.这是我目前的代码:
//Script for Choosing which form to display
$("#email-button, #text-button").live('click',
function(){
//figure out what button was clicked.
if(this.id === "email-button"){
var btnA = $(this);
var btnB = $("#text-button");
var divA = $('#email-form');
var divB = $('#text-form');
}
else{
btnA = $(this);
btnB = $("#email-button");
divA = $('#text-form');
divB = $('#email-form');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button_span')){
return;
}
//see if div is …如何将这些事件更改为.live()事件处理程序？
我以为我可以只更改$(document).ready(function()... to .... $(document).live(function()以及.keydown和.data到.live但我不能似乎让它工作......请帮助.
$(document).ready(function(){
$('#number').bind('keyup change focus', function(){
var field = this;
timer = setTimeout(function(){runSearch(field);}, 444);});
$('#number').keydown(function(){clearTimeout(timer);});
//url selection by specifics
$('#phone_book tr').data('bgcolor', '#aaf').hover(function(){
var $this = $(this);
var newBgc = $(this).data('bgcolor');
$(this).data('bgcolor', $(this).css('background-color')).css('background-color', newBgc);
});
//url selection by specifics
$("#phone_book tr").click(function(){
var id = $(this).children().first().html();
var type = $(this).parents('table').siblings('div.module_header').html().toLowerCase();
我想在我的DOM上调用特定元素的函数,例如:
$(".red").css({backgroundColor: "pink"});
它的工作原理确定为已经存在的到DOM任何元素,但我也希望这种方法在动态添加到DOM元素被调用.
我尝试过这样的事情:
$(".red").on(function(){ this.css({backgroundColor: "pink"}) });
要么:
$(".red").on("load", function(){ this.css({backgroundColor: "pink"}) });
但没有任何成功.
检查jsFiddle
这个.css()电话只是一个例子,我实际上想要调用其他类型的函数
我在Firefox中遇到此错误:TypeError:$("#main-CNTR").on不是函数.而这段代码根本不起作用:
$(document).ready(function(){
$('#main-CNTR').on('mouseenter','.social_span',function(){
alert("INSIDE");
});
$('#main-CNTR').on('mouseleave','.social_span',function(){
alert("OUTSIDE");
});
});
HTML部分就是这个
<span class="social_span"></span>
<div class="row clearfix" style="display:none;">
<ul class="social-buttons cf">
<li>1</li>
</ul>
</div>
鼠标进入范围时,应显示一条消息并显示下一个div.显然div#main-CNTR是主要的内容容器div,HTML片段在页面中重复多次.
实时方法正常工作但不在ie8中.
$('.social_span').live('mouseenter',function(){
alert("INSIDE");
});
$('.social_span + .row').live('mouseleave',function(){
alert("OUTSIDE");
});
谁能帮我？谢谢!
<script type="text/javascript" src="/js/libs/modernizr-2.5.3.min.js"></script>
<script type="text/javascript" src="/js/jQuery/engine/core8.js"></script>
<script type="text/javascript" src="/js/jQuery/engine/ui.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.tools.min.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.easing.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.fancybox.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.li-scroller.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.reflection.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="/js/jQuery/plugin/jquery.selectbox.js"></script>
我想在悬停时交换一个img src.通常我会使用:
$('#img').hover(function() {
$(this).attr('src', 'http://www.example.com/new-img.jpg');
});
但是,我正在通过Ajax加载内容,所以通常我会使用:
$('#main').on('hover', '#img', function() {
$('#img').attr('src', 'http://www.example.com/new-img.jpg');
});
但我正在阅读('hover',...)在jQuery 1.8中被弃用并在1.9中被删除(jQuery Docs))中,这是我目前正在使用的.除了使用以外,有没有人有任何工作:
$('#main').on('mouseenter', '#img', function() {
$('#img').attr('src', 'http://www.example.com/new-img.jpg');
});
$('#main').on('mouseleave', '#img', function() {
$('#img').attr('src', 'http://www.example.com/old-img.jpg');
});
在我的项目中,我将几个按钮附加到div:
$(".tab-content").append("<div class='landing_content'><button class='off-screen-nav-button btn btn-info btn_edit' data-effeckt='effeckt-off-screen-nav-right-overlay'>Edit</button></div>");
然后使用以下代码监听单击:
$(".tab-content").on("click",".btn-edit",function(){
console.log('edit');
});
为什么这不起作用？我习惯使用.live()但它已被弃用.
谢谢.
这将是一个难以解释的...
我有一个按钮,这是一个自定义按钮.
<button class="like-post">Like Post</button>
在用户单击之后,我执行AJAX调用并向数据库添加一行,然后添加和删除该类.
btn.removeClass('btn-success')
.removeClass("like-post")
.addClass('btn-default')
.addClass('unlike-post')
.html("<span class='glyphicon glyphicon-remove'></span> Un-like");
这一切都运行正常,除非在课程改为'不匹配'之后,按钮仍然会对类似后的类触发器做出反应.
所以我有这个:
$(".like-post").on('click', function(){ });
即使在按钮没有类似帖子之后,也会执行该操作.我已经检查过,该课程肯定会被删除/正确添加.
我想用不同的帖子类进行另一个动作,但是在解决之前不能这样做.
我注意到我网站上其他地方有关于.on()的类似问题.我无法在jsFiddle中重现这个问题,因为它在那里工作得很好.
使用bootstrap +最新的jQuery版本.有任何想法吗？我知道这是一个很长的镜头,但认为有人可能有类似的问题.
谢谢.
我正在使用bootstrap根据对象数组中的值呈现表.我有一个附加了jQuery on('change')方法的select,这样当选择列表中的项时,将根据所选值呈现一个新表.
当单击顶行时,该表使用bootstrap collapse来显示/隐藏表中的行.行中的最后一项有一个glyphicon箭头,表示该行可以折叠/展开,如下图所示
我使用下面的jQuery来切换图标
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
到目前为止,我所有的工作正如这个小提琴所示http://jsfiddle.net/vgfb74u0/
我面临的问题是,当基于所选项呈现新表时,更改字形的jQuery不会触发,因此当表展开时,图标保持不变.
我在方法的开头放了一些console.log,我从来没有看到它被触发.所以对我的新手来说,点击事件永远不会被触发.
令我感到惊讶的是,我已经设法达到这个目标并且不知道问题可能是什么,所以任何帮助,指针或建议都是最受欢迎的!
简单的问题,因为jQuery .live()的1.7版本已经被弃用,而不是.on(); 但.on()似乎不适用于通过JavaScript呈现并加载到DOM中的元素.所以我的问题是,应该仍然使用.live()或.on()如何捕获这些新生成的元素？
举个例子,这是我的代码:
$("#listitem").append("<li id='removeitem'>" +
formdata + ' <a href="#">Remove</a></li>');
当我尝试通过.on()操作这个元素时 - 结果什么都没有,而.live()能够抓住这个元素.
$("#removeitem").live("click", function(event) { alert($(this).text()); });
我有这个使用live方法的代码,它适用于Opera和Chrome:
$(".dynamicaly_created_div").live("click",function(){
$(event.target).parent().remove();
});
但不是在FF.所以我试图将"live"替换为"on"(我读过somwhere,现场已被弃用).但是,这在任何浏览器中都不起作用.
对此有任何解决方案吗？
我正在使用分页和jQuery,我的代码首先看起来像这样:
$(function() {
$(".pagination a").live("click", function() {
$.get(this.href, null, null, "script");
return false;
});
});
然后我注意到live在jQuery 1.9中删除了所以我将代码更改为:
$(function() {
$(".pagination").on("click", 'a', function() {
$.get(this.href, null, null, "script");
return false;
});
});
但不知怎的,这也行不通!问题是我可以从第一个ajax页面导航到第二个页面,然后将第二个页面导回到第一个页面或第三个页面,我的ajax不起作用.我太习惯了,因为我的代码没有注意到新添加的内容.pagination a.