JQueryのクリック機能は、それ自身のクリック機能を持つ親要素内のボタンでは機能しません

Question

クリックするとJavaScript機能を実行する必要があるボタンがあります。

問題は、このボタンが、ボタンの実行を妨げるように思われる独自のクリック機能を持つ別の要素内にあることです。

は、ここでは、コードです：

  <a id="login">Login 
      <span> 
       <span style="display:block; padding:0 0 5px 0;"> 
        content here... 
       </span> 
       <input type="button" id="forgotten" value="test" /> 
      </span> 
     </a> 

そして、ここでのjavascriptです：

$("#login").click(function() { 
    $("#login > span").slideDown(); 
}); 
$('body').click(function() { 
    if ($("#login > span:visible")) { 
     $("#login > span").slideUp(); 
    } 
}); 
$('#login, #login > span').click(function(event){ 
    event.stopPropagation(); 
}); 

$("#forgotten").live("click", function() { 
    // ... Run function here... 
}); 

私はそれが理由コードののstopPropagation部分があるかもしれない感じています。

アイデア？

Answer 1

liveファンクションは、documentエレメントにハンドラを接続し、イベントが伝搬するのを待ちます。イベントが伝播しないようにすることで、ハンドラが呼び出されるのを防ぐことができます。

$('#login, #login > span').delegate("#forgotten", "click", function() { 
    // ... Run function here... 
}); 

またはjQueryのではon方法を使用することができます1.7以上：

$('#login, #login > span').on("click", "#forgotten", function() { 
    // ... Run function here... 
}); 

Answer 2

コードのstopPropagation部分が原因である可能性があります。あなたは、ボタンのクリックをフックするliveを使用しているという事実と組み合わせる

正しいです、。直接接続した場合、ボタンはイベントを最初に取得します。しかし、liveを使用しているため、クリックがdocumentまで完全に届かない限り、ボタンのクリックイベントは発生しません。その理由は、liveの動作です。ドキュメントレベルでイベントをフックし、イベントが到達すると、使用したセレクタが実際にクリックされた要素またはその祖先と一致するかどうかが調べられます。あなたのケースでは、それは実際にそこに到達することはありません。なぜなら、それは#login要素を通過するため、それ以上のイベントのバブリングはstopPropagationで停止します。

このようにするには、liveの代わりにボタンを通常の状態にする必要があります。あなたの構造からは、とにかくliveを使用する理由はすぐにはありません（もちろん、あなたが私たちに示していないこともあります）。 #loginクリックハンドラがすべて添付された後にボタンを動的に追加する場合は、追加するときにフックする必要があります。

Answer 3

あなたは（生きて似ていますが、指定された親要素ではなく、document付き）delegateメソッドを使用してこの問題を回避することができますあなたが望む子にフックを付けるには、delegate（）（http://api.jquery.com/delegate/）またはon（）（jQuery> 1.7のみ）（http://api.jquery.com/on/）を使用してください。デリゲート/オンはバブル/伝播しません。