标签: jquery-events

当用户进入历史回溯1时...如何检测到？然后,提醒"用户点击回来!"

使用绑定(最好是jquery)

我有一个选择框的代码,由Chosen jQuery插件显示.我想要实现的是从已选择的当前项获取值:

<div>
  <select id="schedule_event" name="schedule[event]" style="display: none; " class="chzn-done"><option value="Game" selected="selected">Game</option>
    <option value="Event">Event</option>
    <option value="Training">Training</option>
  </select>
  <div id="schedule_event_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 854px; ">
    <a href="javascript:void(0)" class="chzn-single chzn-single-with-drop" tabindex="-1">
      <span>Game</span>
      <div></div>
    </a>
    <div class="chzn-drop" style="width: 849px; top: 27px; left: 0px; ">
      <div class="chzn-search">
        <input type="text" autocomplete="off" style="width: 814px; " tabindex="0">
    </div>
    <ul class="chzn-results">
      <li id="schedule_event_chzn_o_0" class="active-result result-selected highlighted" style="">Game</li>
      <li id="schedule_event_chzn_o_1" class="active-result" style="">Event</li>
      <li id="schedule_event_chzn_o_2" class="active-result" style="">Training</li>
    </ul>
  </div>
</div>
</div>

我现在用来查找当前值的JavaScript是:

$("#schedule_event").chosen().change( function() {
    alert(+ $(this).text());
    $('#' + …

这似乎是一个愚蠢的问题,但只是得到了bootstrap并且它没有在网站上给出关于向按钮添加Javascript回调的任何示例...

尝试将我的按钮设置为id标志然后

<div class="btn-group">
  <button id="rectButton" class="btn">Rectangle</button>
  <button class="btn">Circle</button>
  <button class="btn">Triangle</button>
  <button class="btn">Line</button>
  <button class="btn">Curve</button>
  <button class="btn">Pic</button>
  <button class="btn">Text</button>
  <button class="btn">Gradient</button>
</div>

我想为Rectangle按钮添加一个回调...

$('#rectButton').on('show', function (e) {
    //ACTION
})

无法获得引导回调的重点.

我在Web上找到的所有内容都面向Rails + Bootstrap ...没有bootstrap和JS.

函数绑定到许多对象的事件.其中一个对象触发事件,jQuery启动.如何找出谁在JavaScript函数中解雇了事件？

我尝试过使用function [name](event){}和戳戳事件,但我得到"'数据'为空或不是对象".

这是我现在的代码:

<script type="text/javascript">
    $(document).ready(function() {
    $('.opening').bind("click", function(event) {
         //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace
            event.data.building = "Student Center";
            event.data.room = "Pacific Ballroom A";
            event.data.s_time = "9/15/2009 8:00";
            event.data.e_time = "9/15/2009 10:00";

            indicatePreferenceByClick(event);
        });
    function indicatePreferenceByClick(event) {
        alert("I got clicked and all I got was this alert box.");
        $("#left").load("../ReserveSpace/PreferenceByClick", { building: event.data.building, room: event.data.room, s_time: event.data.s_time, e_time: event.data.e_time});
    };
</script>

可能重复:
iPad Web App:在Safari中使用JavaScript检测虚拟键盘？

我正在为一个网站构建一个移动版本,我很感兴趣,如果我可以使用jquery/js/html5或任何其他技术创建相同的分屏效果,可以在虚拟键盘可见时在移动应用上进行.

例如,如果用户进入我的网页并单击输入文本字段,则会显示虚拟键盘,浏览器会自动缩放到输入文本字段所在的区域.

我想要的是能够根据新的分辨率(屏幕高度 - 键盘高度),通过移动屏幕顶部的输入文本字段,然后根据一些提示,在虚拟键盘可见时更改我的页面内容用户在文本字段中输入的内容.

这是一些草图,看看我在说什么:

这是没有键盘的页面视图,结果基于搜索:

带有纵向键盘的页面,徽标消失,文本输入移至顶部,最多显示4个项目

带有横向键盘的页面,徽标消失,thext输入移动到顶部并放大,只显示2个项目

是键盘是隐藏的,页面应该去faze 1.

希望这可以帮助.

香草JavaScript

在vanilla JavaScript中,可以使用以下语句轻松启用和禁用按钮:

button.disabled = state;

当人类尝试单击按钮并以编程方式单击按钮时,这都适用:

var button = document.getElementById('myButton');

button.addEventListener('click', function() {
    alert('world');
});

button.disabled = true;
button.click(); // No output
button.disabled = false;
button.click(); // Output : "Hello" and "world
button.disabled = true;
button.click(); // No output

<input type="button" id="myButton" value="button" onClick="alert('Hello')"/>

这在使用MouseEvent界面时也有效:

var button = document.getElementById('myButton');

var click = new MouseEvent("click", {
    "view": window
});

button.addEventListener('click', function() {
    alert('world');
});

button.disabled = true;
button.dispatchEvent(click); // No output
button.disabled = false;
button.dispatchEvent(click); // Output : …

我使用jQuery .bind()和.unbind()来处理滚动时的动画事件.

$(window).bind('scroll', function(){
  ... code ...
  if(code_was_successful){
    $(window).unbind(e);
  }
});

从1.7开始(我使用的是1.11)我们应该使用.on()和.off(),但是.off()似乎不支持解除自身绑定的事件处理程序.对于普通的点击事件等,我必须将处理程序保存到变量并设置另一个事件处理程序来解除绑定(这会破坏目的),而对于滚动事件则不可能,因为.off()需要选择器解除绑定一个特定的处理程序,滚动事件不能有一个.

这样做的现代方法是什么？

我发现了这个：复制到剪贴板也适用于移动设备？

但是 VueJS 不使用 jQuery。那么有什么替代方法呢？

大家好.我有一个表单,当各种元素发生变化时,它会被远程提交.特别是在搜索字段上,我使用密钥来检测字段中的文本何时发生变化.这个问题是当有人输入"鸡"时,表单会被提交七次,只有最后一次计数.

什么会更好是这样的

• 检测到密钥 - 开始等待(一秒钟)

• 检测到另一个密钥 - 重启等待时间

• 等待完成 - 获取价值并提交表格

在我离开并编写我自己的版本之前(我真的是一个只有一点js的后端人,我用jquery来处理所有事情),是否已有现有解决方案？这似乎是一个普遍的要求.一个jquery插件可能吗？如果没有,最简单和最好的方法是什么？

谢谢,最大

更新 - 为Dan添加的当前代码(下)

丹 - 这可能是相关的.我正在页面上使用的一个jquery插件(tablesorter)需要这个文件 - "tablesorter/jquery-latest.js",如果包含它,会导致与您之前的代码相同的错误:

jQuery("input #search").data("timeout",null)未定义 http://192.168.0.234/javascripts/main.js?1264084467 第11行

也许在不同的jquery定义之间存在某种冲突？(或者其他的东西)

$(document).ready(function() {
  //initiate the shadowbox player
//  Shadowbox.init({
//    players:  ['html', 'iframe']
//  });
}); 

jQuery(function(){
  jQuery('input#search')
    .data('timeout', null)
    .keyup(function(){
      jQuery(this).data('timeout', setTimeout(function(){
          var mytext = jQuery('input#search').val();
          submitQuizForm();
          jQuery('input#search').next().html(mytext);
        }, 2000)
     )
     .keydown(function(){
       clearTimeout(jQuery(this).data('timeout'));
     });
    });
});

function submitQuizForm(){
  form = jQuery("#searchQuizzes");
  jQuery.ajax({
    async:true, 
    data:jQuery.param(form.serializeArray()), 
    dataType:'script', 
    type:'get', 
    url:'/millionaire/millionaire_quizzes',
    success: function(msg){ 
     // $("#chooseQuizMainTable").trigger("update"); 
    }
  }); 
  return …

我想将affix插件与bootstrap navbar-fixed-top类结合起来.到目前为止,我已经使它工作,然后当我滚动浏览导航栏时,它得到修复.但当我向上滚动时,我希望它再次回到静态.我从较旧的bootstrap版本和unaffix事件中看到了一些代码.为什么会消失？我可以创建一个吗？或者如何完成我在这里尝试的东西？

navbar_secondary = $( '.navbar-secondary:first' );

navbar_secondary.affix( {
    offset: {
        top: function () {
            return (this.top = navbar_secondary.offset().top )
        }
    }
} );

navbar_secondary.on( 'affix.bs.affix', function () { // this is actually the wrong event for this. I want this to fire when its *not* affixed
    console.log('affix');
    navbar_secondary.removeClass( 'navbar-fixed-top' ).addClass( 'navbar-not-fixed' );
} );

navbar_secondary.on( 'affixed.bs.affix', function () {
    console.log('affixed');
    navbar_secondary.removeClass( 'navbar-not-fixed' ).addClass( 'navbar-fixed-top' );
} );