Переключить тип элемента при щелчке

Question

У меня есть код jquery, который закрыт, чтобы изменить тип элемента при щелчке и назад, если пользователь щелкнул anye out вне этого элемента.

Проблема в том, что некоторые причины в 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 вы имеете этот элемент <span class="btn"aria-hidden="true">Go</span> который имеет class="btn". Я не уверен, что вы действительно хотите его там, так как он уже используется для его родителя.

В части Javascript здесь $(e.target).is(".input-group input") вы ожидаете соответствия элемента, у которого есть родительский элемент с классом .input-group, а сам элемент является input. Одна из проблем здесь заключается в том, что вы не используете элементы input в любом месте вашего HTML (и не переключаетесь с любого элемента на код Javascript, если на то пошло). Я считаю, что вы хотите, чтобы это было button. Другой (я не совсем уверен в этом), я не думаю, что вы когда-нибудь сможете сопоставить селектор функции .is(), так как вы используете вложенный селектор. Цель будет элементом, в котором событие было инициировано, и оно имеет свой собственный тип и/или идентификатор или класс. Это то, что вам нужно будет использовать, чтобы проверить, нужен ли вам этот элемент (поскольку вы используете функцию .is()).