我如何防止一个功能在jquery .live事件上运行多次

问题描述：

好吧，我正在重新编辑我的文章，因为我认为它可能更清晰。我如何防止一个功能在jquery .live事件上运行多次

我有一个ASP.NET页面与gridview等。

在gridview的结果行是一个图像，当点击打开一个模式弹出窗口（基本上是一个隐藏的div显示在单击）。

这种模式，因为它似乎是由一些ajax/json动态地填充2列表，第1列只是文本行，第2列空白下拉列表和复选框的组合（这些全部添加到DOM AFTER主页面加载）。

我想通过ajax/json填充检查列表，当他们被用户点击时，我只希望这发生在第一次点击，无论用户点击多少次下拉在那之后（甚至在离开焦点后回来），我不想看到更多重复出现。

以下是当单击下拉列表时，当前工作的代码，即下拉列表填充。特的问题是，如果我失去焦点，然后再单击下拉列表中，它被用重复的名单，重新填充：我已经被你的好自我变更为下述代码上建议

<code> 
    $('#FSSiteName').live('focus', function() { 
     var $this = $(this); 
     getFSSites(); 
     //i thought the below line would stop it happening again when i click on the dropdown 
    $this.unbind('focus'); 
}); 

function getFSSites() { 
      var ddSites = $("#FSSiteName"); 
      $.ajax({ 
       type: "POST", 
       url: "Circuits_OrderManagementTracker.aspx/getTheSitesList", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (response) { 
        var xmlDoc = $.parseXML(response.d); 
        var xml = $(xmlDoc); 
        var FSSitesReturned = xml.find("Table"); 

        $.each(FSSitesReturned, function (index, FSSitesReturned) { 
         dbname = $(this).find("SiteNames").text() 
         ddSites.append('<option>' + dbname + '</option>'); 
        }); 
       }, 
       failure: function (msg) { 
        alert(msg); 
       } 
      }); 
     } 
</code>

，但是当我做低于我的下拉列表不再被填充，我也试过.one（），它具有相同的效果。

<code> 
     $('#FSSiteName').on('click', function() { 
      var $this = $(this); 
      //run your alert here if it´s necessary 
      //alert('Focused for the first time :)'); 
      getFSSites(); 
      //unbind the event to prevent it from being triggered again 
      $this.off('click'); 
     }); 
</code>

希望这对希望提供帮助的人来说更清楚一点。

没有你尝试'.one（）'：http://api.jquery.com/one/？ – varnie 2013-03-19 19:35:51

您是否在构建重用框架？如果没有我建议只是利用一个没有这一切为你喜欢[Telerik的剑道（http://www.kendoui.com） – 2013-03-19 19:36:46

。一（）将只触发一次每context元素，不是每个委托目标。 – 2013-03-19 19:37:03

答

的live()相反的是die()但both are deprecated，你应该使用on()和off代替。

另外的重复人群实际上，'。一（）'更适合在这种情况下。 – Flater 2013-03-20 10:29:14

@Flater使用任何.on（）或.one（）为我工作，因为这些似乎阻止getFSSites（）运行。我只能假设在这个阶段，这是因为.Live（）正在拾取新添加的#FSSiteName到DOM，而其他人根本没有看到它们？ – MoiD101 2013-03-20 10:40:50

没有说它不工作:)但'.one（）'已经被专门创建为只运行一次，而不必自己解除绑定处理程序。 – Flater 2013-03-20 11:16:35

答

同意Varnie的评论使用.one而不是.live（）。

$('#FSSiteName').one('focus', function() { 
     getFSSites(); 
});

Live（）适用于动态添加到DOM的元素;在页面首次在浏览器中加载时不存在的元素。由于你的元素有一个id选择器，而不是一个类选择器，我假设你根本不需要使用.live（）/。on（）。

您好Steve，我使用的是live（），因为当弹出窗口模式出现时，动态地添加了这些元素，因此会显示空的下拉列表。问题是.on（）不起作用，只有live才能填充下拉列表。我试过.one（），似乎阻止了动态填充列表。即时通讯只是有点新到弄清楚，你的建议是赞赏 – MoiD101 2013-03-19 19:58:14

你是否有可能在jsfiddle或plnkr等网站上发布完整的代码？ – 2013-03-19 21:26:01

嗨史蒂夫我不这么认为，但我会编辑我的OP更清晰，并显示更多的代码... – MoiD101 2013-03-20 09:10:13

答

使用on和off很简单。

上（） - >添加evend处理机关闭（） - >删除事件处理

$("#item li").on('click', function() { 
    $(this).text('ITEM CLICKED') 
    alert('CLICKED'); 

    //remove the event 
    $(this).off("click") 
});

看到这个例子：http://jsfiddle.net/jMxxa/

Jquery的文档和关闭：

：http://api.jquery.com/on/ 关闭：http://api.jquery.com/off/

感谢Kesymaru但如果我使用。对和.off列表不再得到动态填充？ #FSSiteName在页面加载时不存在，只有在加载弹出窗口并动态添加表格时才会动态添加它 – MoiD101 2013-03-19 20:44:56

答

大家好，非常感谢您的帮助，这真的是我作为学习者了解的最好的网站之一。

我已经把在自己的解决方案，这似乎这样的伎俩，但这么新的编码，如果我做的东西是不理想有一个更好更简单的方案我将不胜感激反馈。

我重新编辑我的OP更清晰看到的上方，仍然站立，但我改变了我的一些代码，仅仅检查下拉列表是空的，它的工作原理确定参见：

<code> 
     $('#FSSiteName').live('click', function() { 
      var $this = $(this); 
      //Check if the dropdown has any options and if no add some 
      if ($this.find('option').length <= 1) { 
       getFSSites(); 
      } 
      else { 
       //Do Nothing!! 
      }    
     }); 

</code>

我如何防止一个功能在jquery .live事件上运行多次

相关推荐