Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.07k stars 4.96k forks source link

Cannot "prevent default" on a button inside the title when this row was injected thru acordion.insertAdjacentHTML #7124

Open ferkiernan opened 9 months ago

ferkiernan commented 9 months ago

Cannot "prevent default" on a button inside the title when de row was injected thru acordion.insertAdjacentHTML

I created a CSS class like this:

.mybuttns{
                display: table-cell; 
                width: 280px; 
                text-align: right;          
            }

Then It was applied like:

<div class="title"> Mytitle plus
    <div class="mybuttns" >
                <div class="ui tiny button">This button shouldn't open my accordion</div>
                <div class="ui tiny button" onclick="">neither this</div>
                <div class="ui tiny button" onclick="">neither this</div>       
    </div>  
</div>

Some accordion rows (understanding row as title+content) were harcoded in the html file, others were dinamically created using an html-string, and then used: acordion.insertAdjacentHTML

On the other side I did my jquery homework:

$('.mybuttns').on('click', function(event) { 
  event.stopPropagation();
});

Expected Result

When clicking anything inside my buttons div it should not open the accordion

Actual Result

Only if the accordion itemas are loaded in the biginning this "stopPropagation" works.

When ittem is added with acordion.insertAdjacentHTML it won't trigger the event $('.mybuttns').on('click', function(event)

Version

2.4

Testcase

Let me know if do you need anything else