機能的なネストされた入力を持つHTMLボタン

Question

私は<button>要素をクリックしてマイページに要素を追加します。

私は何をしたいのですが、私は入力数をすることがあった、このボタンの内側に<input>を持つことであるし、ボタンのクリックで、それは代わりに<button>

にx回をクリックするのx倍の要素を追加します

デモここを参照してください：http://jsfiddle.net/MWxgb/5

問題は、私はボタンの内側に<input>要素内をクリックしないことです、それは代わりに、ボタンをクリックします。

この現象を回避する方法はありますか？

Answer 1

http://jsfiddle.net/3vtTv/2/

私は、divにボタンを変更しましたまだ012を使用してそれをスタイルするには。

次に、#countクリックハンドラのclickイベントでstopPropagationを呼び出します。

これはIE9、Chrome 10、FF4で動作するようですが、残念ながらボタンはまだテキストボックスをクリックすると点滅します。それを回避する方法がわからない

Answer 2

奇妙な考えでは、うまくいくとは思えません。私はちょうどテキスト入力を使用することをお勧めし、いくつかのjavascriptをクリックして/ enterキーを押す読み取りを設定します。 はここthis question

を参照してくださいちょうどバブリングから<input>のクリックを防ぐan example

Answer 3

です：

$("#count") 
    .click(function(e) { 
     e.stopPropagation(); 
    }); 

http://jsfiddle.net/qT7gC/