阅读关于jQuery性能的另一个SO问题,我开始考虑使用事件委托而不是单独绑定元素的重要性.我主要考虑的是jQuery,但我认为它可能适用于Javascript.
事件授权有两个主要目的:
我的问题是关于其中的第二个问题.一般的答案可能是"它取决于确切的情况",但我想知道是否有经验法则或基准测试方法来测试这一点.
所以,问题是:在事件委托的性能优势超过性能成本之前,您需要多少元素？
javascript performance jquery event-delegation jquery-events
我在jquery的ready函数中将一个自定义事件处理程序附加到body.紧接着,我成功触发了自定义事件.
$(function(){
$("body").on("test", function(){ alert("test triggered"); }
$("body").trigger("test");
}
但是,当我在控制台中触发它时没有任何反应.为什么？
有没有办法在像这样的div元素上工作.keypress？:
<html>
<body>
<script type="text/javascript">
<!--
$('#idtext').keypress(function(event) {
var keyCode = event.keyCode;
$('#idtext').text(function(i, text) {
return text + String.fromCharCode(keyCode);
});
});
// -->
</script>
<div id="idtext"></div>
</body>
</html>
我正在研究"添加链接"功能.为此,我正在使用Twitter Boostrap JS的Modal插件.在主页面上只有要填充的"链接"字段,当用户点击"添加链接"按钮时,会弹出一个模式,用户会看到完整的表单以填充3个字段:链接,标题,标签.但是,我希望链接字段预先填充上一步的值.它与您在delicious.com上保存链接时发生的情况类似.
感谢Joe的帮助(上一个问题)我可以在模态对话框上打印linkURL,但重要的是此linkURL是带有3个字段(链接,标题,标签)的表单的链接字段的值.知道如何做到这一点？谢谢!
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
$(document).ready(function()
{
$('#modal-from-dom').bind('show',function()
{
$(".modal-body").html($("#linkURL").val());
});
});
</script>
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Add Link</h3>
</div>
<div class="modal-body">
<!--
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>"
<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>
</form>
-->
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Add Link</a>
</div>
</div>
<div class="container"> …我有一个涉及几个不同框架/库的问题,尽管主要是Twitter Bootstrap(js)和Rails.
我在我的应用程序中有一个链接响应一些js:
$(function() {
var $modal = $('<%= escape_javascript( render 'front_end/bookings/modal', :product => @product, :customer => @customer, :booking => @booking ) %>'),
$calendar = $modal.find('#calendar'),
currentProduct = <%= raw(@product.to_json) %>;,
initBookingCalendar;
$('body').append($modal);
$modal.modal('show');
/* Booking Calendar */
initBookingCalendar = function(el, productId) {
el.fullCalendar()
...
};
$($modal).on('shown', function() {
if($calendar.is(':empty')) {
initBookingCalendar($calendar, <%= @product.id %>);
}
});
});
问题是'显示'事件不会因为某些原因在IE9中触发!？我在这里重现了这个问题:http://jsfiddle.net/tvkS6/并通过这样做得到它:http://jsfiddle.net/tvkS6/9/.问题是我不知道如何在我的代码中实现解决方案,因为我真的不明白问题是什么.
我必须等待initBookingCalendar直到完全显示模式的原因是jQuery FullCalendar插件要求在呈现日历之前元素可见.
任何提示都表示赞赏!
jquery ruby-on-rails fullcalendar twitter-bootstrap jquery-events
有没有办法通过点击事件显示滚动显示的所有项目？ 或许揭示所有功能？
问题:
我正在使用滚动显示以及同位素.同位素的分选功能与滚动揭示反应奇怪.
当我点击"过滤器"按钮时,我正在调用同位素功能过滤器.
$grid.isotope({filter: '.fish-filter'}); // example
但是,如果我在点击所述文件管理器按钮后向下滚动,我的网格中就会出现漏洞,我必须在通过滚动显示所有项目后"重新点击"按钮
谢谢!!
更新
我在这里添加了布局调用 - 这至少修复了之前存在的漏洞:
window.sr = ScrollReveal({
beforeReveal: function (domEl) {
//$grid.isotope( 'layout'); // fixes holes
},
afterReveal: function (domEl) {
$grid.isotope('layout');
}
});
然而 - 新过滤的物品没有"淡入",因为它们与滚动显示它们"平铺",与同位素的样式一样.理想的情况是显示所有和布局场景 - 这种方式你不能注意到动画中的任何差异 - 或者另一种情况可能只是简单的恒定渐变而不管点击过滤器.
更新更新
我们决定让所有瓷砖都具有相同的高度,以便不再遇到问题.
谢谢
javascript jquery jquery-isotope jquery-events scrollreveal.js
设置阶段:
我有一层在另一层之上.底层包含链接(简单图像),顶层包含高级工具提示,如底层的悬停.这些工具提示可能很大(它们可以轻松地重叠到其他链接上,并且几乎总是与它们作为工具提示的链接重叠).
我的问题:
我希望我的鼠标悬停事件发生在底层,然后在鼠标悬停时显示上层的工具提示.这样,当您从底部链接移开时,上层中的工具提示消失,并且新链接的工具提示可以显示出来.
如何从顶层获取事件并将它们传递到下面的图层？这样顶层就是事件透明的.
示例HTML:
jQuery(document).ready(function(){
jQuery('div.tile').click(function(){
jQuery('#log').html(this.id + " clicked");
return false;
});
jQuery('div#top').click(function(){
jQuery('#log').html('Top clicked');
return false;
});
});.tile { width: 100px; height: 100px; position: absolute; }
.tile:hover, over:hover {border: 1px solid black;}
.over { width: 100px; height: 100px; position: absolute; display:none}
.stack, #sandwich { width: 400px; height: 400px; position: absolute; }
#tile1 {top: 50px; left: 50px;}
#tile2 {top: 75px; left: 10px;}
#tile3 {top: 150px; left: 310px;}
#tile4 {top: 250px; left: 250px;}
#tile5 {top: 150px; left: …有没有办法input[type="text"]在BlackBerry中捕获退格键？我试过$('input[type="text"]').bind('keydown', function(event) { ... });并捕获除退格(del)之外的所有按键事件.按此键不会触发任何键事件.
有谁知道捕捉事件的方法？
我正在为OS 6.0开发并使用BlackBerry模拟器9800进行测试.
编辑 - 我正在测试的代码
<div id="myPage" data-role="page" data-theme="b">
<div data-role="content">
<input type="text" id="ddd" />
</div>
<script type="text/javascript">
$('input[type="text"]').bind('keydown', function(e){
if(e.keyCode == 8)
alert('backspace trapped')
});
</script>
</div>
blackberry keyevent blackberry-simulator jquery-mobile jquery-events
问题是当我想要垂直滚动时触发swipeleft/swiperight事件.
我们使用的是jquery mobile 1.1.0版本和jquery 1.7.1.
和代码是:
$(document).delegate('#quizResumePage', 'swipeleft swiperight', function (event) {
event.stopImmediatePropagation();
if (event.type == 'swipeleft') {
$('#btnnext').trigger('click');
} else if (event.type == 'swiperight') {
$('#btnprevious').trigger('click');
}
event.preventDefault();
});
那么为什么当我想要翻页时滑动事件触发器？
这个问题发生在三星galaxy android 2.3.5 ...
任何人都可以帮我解决这个问题吗？
提前致谢...
我想在这个选择框上注册onchange事件..
<select id="demo">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</select>
我的页面上有两个版本的jQuery,使用noConflict分隔
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$m = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
我把这段代码放在脚本标签中..
<script>
$("div#hello").on("change","select#demo",function (){
console.log("in $ on function");
});
$m("select#demo").on("change",function(){
console.log("in $m on function");
});
</script>
我在selectbox上使用触发了onchange事件
$("#demo").val("Orange").trigger("change")
然后它执行
$("#demo").on("change",function(){..})
但不要执行第二个
($m("#demo")..)
如何触发调用两个事件处理程序的onchange事件($ and $m)？
jquery-events ×10
jquery ×8
javascript ×4
android ×1
blackberry ×1
fullcalendar ×1
jquery-ui ×1
keyevent ×1
modal-dialog ×1
performance ×1