クリック時の要素タイプの切り替え

Question

ユーザーがクリックしたときにエレメントのタイプを変更するには、jqueryコードがあります。

問題はCodePenで何らかの理由フォアクリックで全く変化していないということですが、元のウェブサイトに一度だけ、何もすることを行います。

HTML

<div> 
<span class="input-group-btn"> 
    <button type="submit" class="btn btn-primary"><span class="btn"aria-hidden="true">Go</span></button> 
</span> 

</div> 

Javascriptを：

jQuery(document).ready(function() { 


    $.fn.changeElementType = function(newType) { 
    var attrs = {}; 

    $.each(this[0].attributes, function(idx, attr) { 
     attrs[attr.nodeName] = attr.nodeValue; 
    }); 

    this.replaceWith(function() { 
     return $("<" + newType + "/>", attrs).append($(this).contents()); 
    }); 
    } 

    $('.input-group-btn button').changeElementType('div'); 





    $(function() { 
    $(".input-group div").on("click", function(e) { 
    $('.input-group-btn div').changeElementType('button'); 

    e.stopPropagation() 
    }); 
    $(document).on("click", function(e) { 
    if ($(e.target).is(".input-group input") === false) { 
     $('.input-group-btn button').changeElementType('div'); 
    } 
    }); 
}); 


}); 

ここではペンです： http://codepen.io/florinsimion/pen/AXxKbG

任意のアイデア？

私が代わりに私は適切な解決策をあなたの実装に可能な修正に関連して、されていない言及する程度だ何をするので、コメントを追加したいのですが、残念ながら私はそれを行うためにはまだ十分な評判を持っていない

Answer 1

。

私はあなたのコードを持ついくつかの問題に気づいたが、私は、彼らが意図したかしていないかはわかりません。 HTMLを皮切り

、あなたはclass="btn"があり、この要素<span class="btn"aria-hidden="true">Go</span>を持っています。私はあなたが本当にそれを望むかどうかは分かりません。それは既にその親に使われているからです。

Javascriptの部分では、$(e.target).is(".input-group input")の場合、親がクラス.input-groupである要素と一致すると予想され、要素自体はinputです。ここでの問題の1つは、input要素をHTMLのどこにも使用していないことです（その点については、Javascriptコード上の要素から切り替えることもありません）。私はあなたがそれをbuttonになりたいと考えています。もう1つ（私はこれについて完全にはわかっていません）、あなたはネストされたセレクタを使用しているので、.is()関数のセレクタと一致することはないと思います。ターゲットは、イベントがトリガされた要素となり、それは、それ自身のタイプおよび/またはIDまたはクラスを有しています。これは、あなたが望む要素であるかどうかを確認するために使用する必要があります（関数.is()を使用しているため）。