Elementtyp beim Klicken umschalten

Question

Ich habe einen JQuery-Code, der den Elementtyp beim Klicken und Zurück ändert, wenn der Benutzer auf das Element außerhalb des Elements klickt.

Das Problem ist, dass aus irgendeinem Grund in CodePen überhaupt nicht auf Klick ändert, aber in der ursprünglichen Website tut das nur einmal dann nichts.

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


}); 

ist hier der Stift: http://codepen.io/florinsimion/pen/AXxKbG

Irgendwelche Ideen?

Answer 1

Ich möchte stattdessen einen Kommentar hinzufügen, da das, was ich erwähnen werde, sich auf mögliche Korrekturen Ihrer Implementierung bezieht, und keine richtige Lösung, aber leider habe ich noch nicht genug Reputation, um das zu tun .

Ich bemerkte ein paar Probleme mit Ihrem Code, aber ich bin mir nicht sicher, ob sie beabsichtigt sind oder nicht.

Beginnend mit dem HTML, haben Sie dieses Element <span class="btn"aria-hidden="true">Go</span>, das class="btn" hat. Ich bin mir nicht sicher, ob Sie es wirklich dort wollen, da es bereits auf seinem Elternteil verwendet wird.

Im JavaScript-Teil, hier $(e.target).is(".input-group input") erwarten Sie, dass ein Element mit einem Elternteil mit einer Klasse .input-group übereinstimmen und das Element selbst ist ein input. Eines der Probleme hier ist, dass Sie keine input Elemente irgendwo in Ihrem HTML verwenden (noch von irgendeinem Element auf Javascript-Code für diese Angelegenheit wechseln). Ich glaube, Sie wollen es button sein. Der andere (ich bin mir da nicht ganz sicher), ich glaube nicht, dass Sie jemals den Selektor der .is() Funktion erreichen können, da Sie einen verschachtelten Selektor verwenden. Das Ziel ist das Element, an dem das Ereignis ausgelöst wurde, und es hat einen eigenen Typ und/oder eine eigene ID oder Klasse. Das müssen Sie verwenden, um zu überprüfen, ob das das gewünschte Element ist (da Sie die Funktion .is() verwenden).