jQueryと入力keydownイベントでの問題

Question

私は単純なJavaScript拡張リストを作成しています。私はそれが入力のリストであり、それぞれが「追加」と「削除」ボタンを持っていることを望みます。ユーザーが[追加]をクリックすると、新しいliが追加されます。ユーザーが[削除]をクリックすると、そのliが削除されます。

<input>で「入力」を押す以外は問題ありません。現在、リストに項目が1つしかない場合、常にRemove.clickイベントハンドラが起動します。なぜ私は分からない。どうすればこれを抑えることができますか？

ここに完全なjQueryがあります。 「入力」問題を修正しようとする試みはコメントアウトされており、機能しません。私はこのコードをより良く設計できると思う。あなたが改善を見たら、私はそれを聞きたいです。

function make_smart_list(list) 
{ 
    var ADD_CLASS = 'foo-widget-Add'; 
    var REMOVE_CLASS = 'foo-widget-Remove'; 

    var jq_list = $(list); 
    jq_list.parents('form').submit(function() { 
     return false;  
    }); 

    function refresh_handlers() { 
     jq_list.find(sprintf('.%s, .%s', REMOVE_CLASS, ADD_CLASS)).unbind('click'); 
     // jq_list.find('input').unbind('submit'); 
     // 
     // jq_list.find('input').submit(function() { 
     //  var jq_this = $(this); 
     //  var next_button = jq_this.nextAll('button'); 
     //  if (next_button.hasClass(ADD_CLASS)) { 
     //   next_button.nextAll('button').click(); 
     //   return; 
     //  } 
     //  
     //  if (next_button.hasClass(REMOVE_CLASS)) { 
     //   return false; 
     //  } 
     //  
     // }); 

     jq_list.find("." + REMOVE_CLASS).click(function() { 
      var jq_this = $(this); 
      jq_this.parent().remove(); 
      refresh_handlers(); 
      return false; 
     }); 

     jq_list.find("." + ADD_CLASS).click(function() { 
      var jq_this = $(this); 
      if (jq_this.prevAll('input').val() == '') { 
       return; 
      } 

      jq_this.parent().clone().appendTo(jq_this.parent().parent()); 
      jq_this.parent().next().find('input').val('').focus(); 
      jq_this.removeClass(ADD_CLASS).addClass(REMOVE_CLASS); 
      jq_this.text('Remove'); 
      refresh_handlers(); 
      return false; 
     }); 
    } 

    refresh_handlers(); 
} 

（sprintfは私が持っている別のスクリプトです。）

更新：マークアップは次のようになります。

<ul id="id_bar" class="foo-widget-list"> 
    <li><input value=""><button class="foo-widget-Remove">Remove</button></li> 
    <li><input value=""><button class="foo-widget-Add">Add</button></li> 
</ul> 

これは、他のコンポーネントを含むフォームの一部ですが、すべてのIこの部分は心配です。

スクリプトが実際にリストを有効にするには：

$(function() { 
    $.each($('.foo-widget-list'), function(index, item) { 
     make_smart_list(item) 
    }); 
}); 

アップデート2：ボタンを "削除" することによって、入力の問題を防ぐために作品を以下のようにKeyDownイベントの設定：

jq_list.find('input').keydown(function(e) { 
     var next_button = $(this).nextAll('button'); 
     if (e.keyCode == ENTER_KEYCODE && next_button.hasClass(REMOVE_CLASS)) { 
      return false; 
     } 

しかし押下します「追加」ボタンによる入力に注目すると、依然としてremove.clickハンドラが起動されます。 }）;

Answer 1

これは動作するはずです：

$('input').keydown(function(e) {  
    if (e.keyCode == 13) { return false; } 
}); 

あなただけENTERキーを追跡し、それが押された場合、イベントを殺します。

submit()メソッドは、<form>要素でのみ使用され、フィールドでは使用されません。

Answer 2

keup docsには、実際には「入力」キーの打撃を検出する特定の例があります。ここでは、わずかに修正の抜粋は、です（たぶん）、それが簡単にあなたのコードの中に入れて作る：

$([element_selector]).keyup(function(event) { 
    if (event.keyCode == '13') { 
    event.preventDefault(); 
    } 
    // other keyup code here 
}); 

あなたはそれを作成するときに要素の上に置くハンドラ内でこれを入れたいと思うでしょうが、この基本的なアイデアは大丈夫​​です。

Answer 3

jQueryは必要ありません。ページ内のすべてのフォームのonsubmitイベントを上書きするだけです。

var inputs=document.all.tags('form')||document.getElementsByTagName('form'); 
for(x=0;x<inputs.length;x++){ 
    inputs[x].onsubmit=function(){ 
     return false; 
    } 
}