标签: javascript-events

我有以下场景:

在我的主页中,我有:

$(".datepicker").datepicker({
    changeYear: true,
    changeMonth: true,
    dateFormat: "dd/mm/yy",
    duration: 'fast'
});

有了这个,我将类"datepicker"分配给的每个输入字段在单击时显示jquery UI datepicker.

现在我在页面上有一个应该处理"onSelect"事件的日期选择器.这样做的最佳做法是什么？

我看到的选项:

• 给那个1 datepicker另一个类,比如datepickerWithSelectEvent.我不喜欢这个解决方案是我得到重复的代码来初始化changeYear,changeMonth,.... 如果我想更改项目中的日期选择器,我将不得不记住在2个地方更改它
• 以某种方式在创建datepicker后添加eventhandler.这看起来最干净,但我真的不知道该怎么做.任何人？

我试图这样做,当用户在文本框中并按Enter键时,它与单击链接相同,在这种情况下它应该将它们带到另一个页面.这就是我所拥有的,它不起作用.

代码

//jQuery 
$(document).ready(function() {

  //if focus is in the input box drivingSchoolInput
  $("#drivingSchoolInput").live("click", function() {

    //if enter key is pressed
    if(e.keyCode == 13) {

        //click the button and go to next page
        $("#button1").click();
    }       
  });   
});

标记

<form>      
  <div class="formDiv">
    <label for="City">Search by Driving School</label>
    <span class="inputBox"><input type="text" name="City" class="input" id="drivingSchoolInput" /></span>
  </div>

  <h4 class="submitButton"><a href="school.html" id="button1">Submit</a></h4>     
</form>

我必须使用JQuery来获取文本区域的粘贴事件.我尝试了以下代码,但它不起作用......

$(document).ready(function()
{ 
  $('#txtcomplaint').keyup(function()
  {  
     TextCounter('txtcomplaint','counterComplaint', 1000 ); 
  }) 
  $('#txtcomplaint').onpaste(function()
  {  
     alert()
     //TextCounter('txtcomplaint','counterComplaint', 1000 ); 
  }) 
});

我有一个问题,在我的ASP.NET MVC Web应用程序中,我必须在页面和所有控件加载后进行某些验证.

在javascript中我使用belwow代码行来调用方法.

window.load = JavascriptFunctionName ; 

我团队中的一些人问我没有使用上面的代码行而是使用JQuery来做同样的事情

 document.attachEvent("onreadystatechange", function() {
        if (document.readyState === "complete") {
            CheckThis();

        }
    });

请帮助我理解两者之间的区别.当我通过在Jquery中保持警报进行测试时,检查首先执行并调用CheckThis函数,其中window.load需要一些时间并在其后执行.请建议

我有以下包含下拉列表的HTML(单选)

        <script type="text/javascript">
            $(document).ready(function () {
                $("#garden").bind('change', function() {
                    alert("Changed");
                    });
            });
        </script>
    <body>
        <div id="content">  
           <select id="garden">
             <option value="flowers">Flowers</option>
             <option value="shrubs">Shrubs</option>
             <option value="trees">Trees</option>
             <option value="bushes">Bushes</option>                 
           </select>
        </div>
    </body>
</html>

呈现HTML页面Flowers时,默认情况下是下拉列表中已选中的元素(是第一个).如果我选择任何其他值("Flowers"除外),则会触发javascript函数并显示包含"Changed"的警告框.

Q1:但是,如果我再次重新选择Flowers,onchange则不会触发事件.我理解这是因为下拉列表中没有任何"更改".是否有一种方法可以触发功能,即使在下拉列表中没有更改已选择的值时也是如此？

Q2:如何提取刚刚选择的元素的值(即使没有选择任何新元素 - 也就是说,用户单击下拉列表,只需单击其他位置).

我已经尝试了"onblur",但这需要用户点击文档上的其他位置,以便下拉菜单失去焦点.任何帮助将非常感激.

非常感谢. [为了简洁起见,我在代码段中编辑了HTML标题和其他脚本内容.]

我想在删除按钮上添加一个确认对话框,询问用户是否可以删除所选项目.

如果没有,则不会发生任何事情,否则应该执行url.

我知道如何通过一些JavaScript代码实现这一点,但我正在寻找一个代码较少的解决方案.我的意思是:

<a href="mysite.de/xy/delete" onClick="...">Delete</a>

是否可以将整个功能放在onClick元素中而不在标题中添加一些额外的javascript？

我正在开发iOS节拍器网络应用程序.由于移动safari一次只能播放一个声音,我正在尝试创建一个"音频精灵" - 我可以使用单个音轨的不同片段来生成不同的声音.我有1秒的剪辑,上面有2个半秒的声音.

<audio id="sample" src="sounds.mp3"></audio>

<a href="javascript:play1();">Play1</a>
<a href="javascript:play2();">Play2</a>
<a href="javascript:pauseAudio();">Pause</a>

<script>
var audio = document.getElementById('click');

function play1(){
    audio.currentTime = 0;
    audio.play();

    // This is the problem area
    audio.addEventListener('timeupdate', function (){
        if (currentTime >= 0.5) {
            audio.pause();
        }
    }, false);
}   

function play2(){
    audio.currentTime = 0.5;
    audio.play();
}

function pause(){
    audio.pause();
}
</script>

在JSFiddle上看到它.

正如您所看到的,我试图使用'timeupdate'事件(jPlayer示例)但无济于事.

我见过Remy Sharp关于音频精灵的帖子,但是(A)我无法让它为我工作,而且(B)我宁愿远离库依赖.

有任何想法吗？在此先感谢您的帮助!

更新

我现在使用它setInterval:

function play1(){
    audio.currentTime = 0;
    audio.play();
    int = setInterval(function() …

我正在尝试在选择项目时发送事件,从指令到控制器使用$emit.我有两个组织更新功能,另一个用于人员.我的指令应该指定应该发出哪个事件.

这是我的更新功能

//对于组织

 $scope.updateOrgs = function(selectedVal) {

 }

//对于人

$scope.updatepeople = function(selectedVal, type) {

}

如果是人,我的指令应该为一个发出事件updatepeople (),如果它是org它应该加注updateorg().

我的指令看起来像......

.directive('search', function ($timeout) {
    return {
        restrict: 'AEC',
        scope: {
            model: '=',
            searchobj: '@',
        },
        link: function (scope, elem, attrs, index) {
            scope.handleSelection = function (selectedItem) {
                scope.model = selectedItem;
                scope.searchModel="";
                scope.current = 0;
                scope.selected = true;
                $timeout(function () {
                    scope.onSelectupdate();
                }, 200);
            };
            scope.Delete = function (index) {
                    scope.selectedIndex = index;
                    scope.delete({ index: index }); …

我已经使用这段代码已经有一段时间了,它一直运行到昨天:

window.onbeforeunload = function() {
    return "¡Atención! Si continúas no podrás volver atrás y podrías perder datos. Revisa todos los campos y termina el trabajo antes de moverte de esta página. ¿Seguro que quieres continuar?";
}

现在的问题是Chrome显示:

但Edge表明它是正确的方式:

我究竟做错了什么？

注意:语言不是问题,因为我尝试过英语和西班牙语.

我有一个下拉菜单,其子菜单放在不同的元素上.所以基本上当鼠标离开菜单项时,子菜单立即关闭,因为子菜单不是孩子.

var menuItem = $(".menu-item");


menuItem.hover(hoverIn, hoverOut);

function hoverIn() {
  var mnItemMeta = $(this)[0].getBoundingClientRect();

  $(".sub-menu").css({
    opacity: 1,
    left: mnItemMeta.left
  })
}

function hoverOut() {
  $(".sub-menu").css({
    opacity: 0
  })
}

html,body{background-color: #efefef;}
.menu {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: center;
}
a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
}
.sub-menu {
  opacity: 0;
  background-color: white;
  position: absolute;
  transition: .2s ease;
}
.sub-menu-list {
  list-style: none;
  padding-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu-item"><a href="#">Menu …