标签: jquery-events

我有一个应用程序,当选择某个单选按钮时显示一个div,然后在取消选择单选按钮时隐藏该div.问题是附加到单选按钮的更改事件仅在选中单选按钮时被调用,而不是在选中另一个单元时被调用(取消选中前一个).我目前的代码如下:

<form name="newreport" action="#buildurl('report.filters')#" method="post">
    <dl class="oneColumn">
        <dt class="first"><label for="txt_name">Name</label></dt>
        <dd><input type="text" name="name" id="txt_name" class="text" /></dd>
        <dt><strong>Type</strong></dt>
        <dt><input type="radio" name="type" id="rdo_list" value="list" checked="checked" /><label for="rdo_type" style="display:inline;">List</label></dt>
        <dd>List a group of records</dd>
        <dt><input type="radio" name="type" id="rdo_fields" value="fields" /><label for="rdo_fields" style="display:inline;">Field Breakdown</label></dt>
        <dd>Breaks down distinct field values for comparison</dd>
        <dt><input type="radio" name="type" id="rdo_history" value="history" /><label for="rdo_history" style="display:inline;">Historical Comparison</label></dt>
        <dd>Provides record changes over a group of years for growth comparisons</dd>
        <dt><input type="radio" name="type" id="rdo_breakdown" value="breakdown" /><label for="rdo_breakdown" style="display:inline;">Student Breakdown</label></dt>
        <dd>Breaks down students by …

是否可以结合使用按键的混合物来发射单个事件？

$(document).keyup(function(e){
    if (e.keyCode == 68 && e.keyCode == 69 && e.keyCode == 86) {
        alert('oh hai');
    }
});

我在Chrome中尝试过,但事件并未触发.

叫我疯了,但我正在编写一个Chrome扩展程序,并希望将D+ E+ V键一起推送到隐藏的开发人员模式.

我想检测何时按下回车键,在js加载后注入的HTML上.

要简单地检测按下回车键的时间,我可以这样做:

$('#textfield').keydown(function (e){
    if(e.keyCode == 13){
        console.log('Enter was pressed');
    }
})

这段代码适用于on(),但我担心这是低效的,因为jQuery会在每次按下一个键时检查.这有什么低效的吗？

$('body').on('keydown','#textfield', function(event) {
  if (event.keyCode == 13) {
    console.log('Enter was pressed');
  }
}

我想做的事:

( clickedObject === someDiv ) //returns true or false

我尝试了什么

( $(e.target) === $('.selector') ); //returns a false negative.

我的解决方法

( $(e.target).attr('class') === $('.selector').attr('class') ); //works as intended, not so clean though.

将我点击的对象与DOM中的对象进行比较的正确方法是什么？

我正在使用该.resize()函数来检测窗口重新调整大小事件,但这会检测高度和宽度的变化.

有没有办法检测宽度变化而不是高度变化？

我有一个ajax回调,它将html标记注入一个页脚div.

我无法弄清楚的是如何创建一种方法来监视div的内容何时发生变化.放置我试图在回调中创建的布局逻辑不是一个选项,因为每个方法(回调和我的布局div处理程序)都不应该知道另一个.

理想情况下,我希望看到某种类似于$('#myDiv').ContentsChanged(function() {...})或的事件处理程序$('#myDiv').TriggerWhenContentExists( function() {...})

我发现了一个名为watch的插件和该插件的改进版本,但永远无法触发.我试着"观察"我能想到的一切(即通过ajax注入改变了div的高度属性),但却无法让它们做任何事情.

有什么想法/帮助吗？谢谢你

编写一些拖放代码,我想在我的mouseup处理程序中取消单击事件.我认为防止默认应该做的伎俩,但点击事件仍然被触发.

有没有办法做到这一点？

这不起作用:

<div id="test">test</div>
<script>
$("#test").mouseup (function (e) {
  var a = 1;
  e.preventDefault();
});
$("#test").click (function (e) {
  var a = 2;
});

我有一个页面显示当地咖啡馆的列表.当用户点击某个咖啡馆时,会显示一个模式对话框,该对话框已经预先填写了"咖啡馆名称".该页面包含许多咖啡馆名称,表单应包含他点击的"咖啡馆名称".

以下是使用链接按钮生成为文本的咖啡馆名称列表

         <table class="table table-condensed  table-striped">
      <tbody>   
        <tr>
          <td>B&Js
          </td>
          <td>10690 N De Anza Blvd </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>

        <tr>
          <td>CoHo Cafe
          </td>
          <td>459 Lagunita Dr </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>


        <tr>
          <td>Hot Spot Espresso and Cafe
          </td>
          <td>1631 N Capitol Ave </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>

      </tbody>
    </table>

这是模态形式

<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
    <a href="#" class="close" data-dismiss="modal">&times;</a>
    <h3>Create Announcement</h3>
</div> …

我在插件jOrgChart的div中有一个twitter bootstrap下拉列表.

我遇到的问题是,当我单击按钮打开下拉菜单时,它还会触发父div中的单击事件,该事件会执行其他元素的折叠.

这是我的HTML:

<div id="chart">
<div class="node">
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Actions
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="text-align:left;">
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
</div>

<div class="node">
...
</div>

我想阻止点击a.dropdown-toggle从冒泡到div.node,我尝试了这个:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
            e.stopPropagation();
        });

但现在下拉列表不起作用.

编辑

这是具体案例:http://jsfiddle.net/UTYma/2/ (感谢Joe Tuskan开始小提琴)

我正在使用现有的Web应用程序,在应用程序中有不同形式的各种提交按钮,一些使用常规http帖子,一些定义onClick函数,一些js事件处理程序使用类上的类绑定到按钮元件.

我想要做的是,通过向按钮添加一个类来将另一个事件处理程序绑定到这些按钮,但我想确定的是新事件处理程序是否会被保证执行,或者表单提交动作之一可能发生在它意味着我的新功能没有被击中之前.

示例场景是我想为这些按钮添加一个类,将它们全部变为一个常见的js函数,该函数只是将使用情况记录到某个api.是否存在因为表单提交已离开页面而未调用日志记录功能的风险？

我没有做过大量的js开发,我可以对它进行100次测试,只是幸运地解雇它.

下面是我为其中一个示例测试过的一些代码 - 再次,我不是要问如何绑定多个事件,问题是关于我对规范的理解以及是否保证所有处理程序的执行.

$(document).ready(function(){
    $('.testingBtn').click(function() {
        window.location.replace("http://stackoverflow.com");
    });
    $( ".testingBtn" ).click(function(){
        alert('submitting!');
    });
});


<input class="testingBtn" type="submit" id="submitform" value="Complete Signup" />

如上所示,我可以绑定多个事件,在这个例子中,只是指向另一个url,但这可能是一个form.submit()等等.在我的测试中,警报总是先被激活,但是我对竞争条件感到幸运吗？