<p dir="auto">Hi,</p>
<p dir="auto">I'm pretty new at working with bootstrap, just switched to it so sorry if this is a dumb question:</p>
<p dir="auto">I have a button that triggers a modal dialog and I want to make that button also call a different function when it's clicked, so I decided to go with the following code:</p>
<p dir="auto">$(function () {<br>
$("#mycontainer").on('click.product-row.deleteproductbtn', function ( e ) {<br>
alert('button clicked!');<br>
})<br>
});</p>
<p dir="auto">Since the above code displays 3 alerts every time I click the button, I went with the following:</p>
<p dir="auto">$(function () {<br>
$(""#mycontainer").off('click').on('click.product-row.deleteproductbtn', function ( e ) {<br>
var <math-renderer class="js-inline-math" style="display: inline" data-static-url="https://github.githubassets.com/static" data-run-id="27b3b705abf08f28aa2062ec4faad0a7">$e = $</math-renderer>(e.target);<br>
e.preventDefault();<br>
alert('button clicked!');<br>
})<br>
});</p>
<p dir="auto">The second bit of code gets the job done, but I keep wondering if I'm damaging the rest of the events that come with bootstrap... How would you associate a button click (already activated through bootstrap) with a custom-made function ?</p>
<p dir="auto">Is it possible to add the ability to combine multiple hidden-x and/or visible-x?</p>
<p dir="auto">For example:</p>
<p dir="auto">I'm creating a list of things and would like to insert a "&lt; br/ &gt;" in the middle that only appears on xs and sm media queries, and not be present for the md and lg media queries. Idea below</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;span class=&quot;visible-sm visible-xs&quot;&gt;&lt;br/&gt;&lt;/span&gt;"><pre class="notranslate"><code class="notranslate">&lt;span class="visible-sm visible-xs"&gt;&lt;br/&gt;&lt;/span&gt;
</code></pre></div>
<p dir="auto">OR</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;span class=&quot;hidden-mg hidden-lg&quot;&gt;&lt;br/&gt;&lt;/span&gt;"><pre class="notranslate"><code class="notranslate">&lt;span class="hidden-mg hidden-lg"&gt;&lt;br/&gt;&lt;/span&gt;
</code></pre></div>
<p dir="auto">This would mean that it would be visible only for sm and xs views.</p>
<p dir="auto">Alternatively, I suppose another route would be to add onto the existing classes like this</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;span class=&quot;hidden-md hidden-down&quot;&gt;&lt;br/&gt;&lt;/span&gt;"><pre class="notranslate"><code class="notranslate">&lt;span class="hidden-md hidden-down"&gt;&lt;br/&gt;&lt;/span&gt;
</code></pre></div>
<p dir="auto">or</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;span class=&quot;hidden-md hidden-up&quot;&gt;&lt;br/&gt;&lt;/span&gt;"><pre class="notranslate"><code class="notranslate">&lt;span class="hidden-md hidden-up"&gt;&lt;br/&gt;&lt;/span&gt;
</code></pre></div>
<p dir="auto">where hidden-down would hide all media queries starting with md and down (s and xs) and hidden-up would hide all media queries starting with md and up (lg).</p>
<p dir="auto">Just food for thought, thanks!</p>