JQuery委托倍数问题

Question

我有一个委托 Jquery 函数，它正在工作，但每次我单击一个字段时，它都会增加委托函数执行的次数。

示例：3 个字段输入，我单击一个，代表会响应，但如果我单击下一个字段或什至同一字段，则该函数将运行两次，3 次运行 3 次等。

Why is this happening and how can i prevent this?

我已经尝试在函数和委托函数这两个部分上使用return false，但这根本没有帮助。

JSfiddle

HTML

<div class="input-group marg_5">
          <span class="input-group-addon">Article Title</span>
          <input id='new_vid_form_title' type="text" class="form-control vid_form" placeholder="Article Title" autocomplete='off'>
          <span class="input-group-addon"> 
            <span id="new_vid_form_title_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
</div>

<div class="input-group marg_5">
          <span class="input-group-addon">Short Desc.</span>
          <input id="new_vid_form_shortDesc_status" type="text" class="form-control vid_form" placeholder="Short Description" autocomplete='off'>
          <span class="input-group-addon"> 
            <span id="new_vid_form_shortDesc_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
</div>

         <hr />

<div class="input-group marg_5">
          <span class="input-group-addon">Youtube ID</span>
          <input id="new_vid_form_youtubeID_status" type="text" class="form-control vid_form" placeholder="Youtube Video ID | watch?v=' this bit ' " autocomplete='off'>
          <span class="input-group-addon"> 
            <span id="new_vid_form_youtubeID_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
</div>

         <hr /> 

JQuery/JS

function new_vid() {
    $("div").delegate("input","click",function(){
        $('.vid_form').keyup( function() {
                  alert('ddd'); 
        });

    });
}

Answer 1

所以，虽然我认为您在这里使用委托来确保代码发生一次，但其中包含的代码会发生多次。澄清一下：每次单击 div 中包含的输入时，它都会执行 delegate 函数的主体。结果？您附加一个 keyup 处理程序。点击2？您附加一个 keyup 处理程序。点击 3?一样的。

您在函数体内拥有的是对 keyup 事件的绑定，而将来不会破坏该 keyup 事件，因此该事件的多次执行。你最好这样做：

http://jsfiddle.net/notsoluckycharm/NYdVA/

$("div").delegate(".vid_form","keyup",function(){
   alert('ddd'); 
 });

现在，委托已被弃用，但我按照您提出的方式回答了它。

较新版本的 jQuery 看起来像这样

$("div").on("keyup",".vid_form",function(){
   alert('ddd'); 
 });