클릭 할 때 요소 유형 토글

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> 

자바 스크립트 : http://codepen.io/florinsimion/pen/AXxKbG

어떤 아이디어 : 여기

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'); 
    } 
    }); 
}); 


}); 

펜입니까?

Answer 1

제가 언급하고자하는 것은 구현에 대한 가능한 수정과 관련이 있으며 적절한 해결책이 아니기 때문에 주석을 추가하고 싶습니다. 그러나 불행히도 저는 아직 그렇게할만한 명성이 없습니다. .

코드에 몇 가지 문제점이 있음을 알았지 만 의도적인지 여부는 확실하지 않습니다.

HTML로 시작하여 <span class="btn"aria-hidden="true">Go</span>의 요소는 class="btn"입니다. 부모님이 이미 사용하고 계시므로 정말로 원하시는 지 모르겠습니다.

자바 스크립트 부분에서 여기 $(e.target).is(".input-group input")은 부모가 클래스 .input-group 인 요소와 일치 할 것으로 예상하고 요소 자체는 input입니다. 여기서 문제 중 하나는 input 요소를 HTML의 어느 곳에서나 사용하지 않고 있다는 것입니다 (해당 항목에 대해서는 자바 스크립트 코드의 요소를 전환하지 않아도됩니다). 나는 당신이 그것이 button이되기를 원한다고 생각합니다. 다른 하나 (나는 이것에 대해 완전히 확신하지 못합니다.) 중첩 된 선택기를 사용하고 있으므로 .is() 함수의 선택기와 일치시킬 수있을 것이라고 생각하지 않습니다. 대상은 이벤트가 트리거 된 요소이며 자체 유형 및/또는 ID 또는 클래스를가집니다. 그것이 당신이 원하는 요소인지를 확인하기 위해 사용해야 할 것입니다 (함수 .is()을 사용하고 있기 때문에).