Develop Reference

How to trigger data-* event in JQuery/JS?

I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.

Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});

HTML element in button prevents disabled in the wrapper element

Fiddle: http://jsfiddle.net/0o1mrapd/20/
Angular stackblitz link: https://stackblitz.com/edit/angular-fhtaki?file=src%2Fapp%2Fapp.component.html
I have a complex case which i need some enlightenment. (For angular developers, you can think the wrapper div as a host selector, <my-button></my-button>)
As you can see in the fiddle I have a disabled button with a wrapper div which has a click event.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span>Click</span>
</button>
</div>
What I expect is that when I click on that area, nothing will happen but alas I get the alert. If I remove the span element and put plain text inside the button, this works.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
Click
</button>
</div>
How can I make the div unclickable in this case? I found out that pointer-events: none does the trick but then I lose the curser-event which I need for accessibility
I stumbled upon this issue while creating a custom button component with an ng-content in Angular but then realized this is bigger than the framework.
Some links i checked:
Can you prevent an Angular component's host click from firing?
Add CSS cursor property when using "pointer-events: none"
How to stop event propagation with inline onclick attribute?
https://github.com/angular/angular/issues/9587

Maybe this example will be useful
function clickHandler() {
console.log('Click');
}
<div onclick="return false;">
<button onclick="clickHandler()">
Click
</button>
</div>

You can use this css property to avoid click event be fired in the span tag. It could be a workaround.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span style="pointer-events:none;">Click</span>
</button>
</div>

Find out which close button closed an alertbox

I have an alert box with multiple close buttons:
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
I registered a handler for the close event as the docs suggest:
$(document).on('close.fndtn.alert', function(event) {
console.info('An alert box has been closed!');
console.info(event);
});
But unless I've missed it, the event doesn't seem to indicate which of the buttons was clicked.
How should I modify my HTML/JS to find out which of the close buttons was clicked? I don't want to modify Foundation's own JS, and I do want the UI behavior to remain consistent for both buttons, nice transitions and all.

Here is working spinet as #Panomosh mentioned above:
$('a.close').on('click',function(e){
console.log($(e.target).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
Greetings!

HTML bootstrap popover function

I was wondering for the popover given by bootstrap I have the following thing -
<img src="femaleprofilepicture2.jpg" class="img-polaroid">
As of now when I click on the image I get both Co-President and sample#uic.edu on the same line. How do I make them appear on different lines.
Thanks

One way you can do this is by making the bootstrap popover content an html and setting html to true and provide a <br/> in between:
data-content="Co-President <br/> sample#uic.edu" and data-html="true"
i.e:
<img src="femaleprofilepicture2.jpg" class="img-polaroid"/>
Fiddle
But it is always better to create the html content separately and populate it in the popover via the options.
Something like this:
HTML:
<img src="femaleprofilepicture2.jpg" class="img-polaroid"/>
<div class="mycontent"> <!-- Here i define my content and add an attribute data-contentwrapper t0 a selector-->
Co-President <br/>
sample#uic.edu
</div>
JS:
$('[rel=popover]').popover({
html:true,
placement:'bottom',
content:function(){
return $($(this).data('contentwrapper')).html();
}
});
Fiddle

Are there known performance issues using jQuery's insertAfter() with select boxes?

I have two "pages" (basically two div tags; only one is shown at a time). Depending on what "page" the user is on, the select box will either appear in a jQuery UI dialog on page 1 (as a slider), or on page 2 as a normal select box. My question is, can I use insertAfter() to move the select box from one page/div to another? Or, more specifically, is there any reason I shouldn't? I've shied away from the clone() function because it creates duplicate IDs, and basically making a copy of each select box and trying to sync their values seems like overkill, unless there is a good reason to not use insertAfter().
Here's a mock-up of the code, in case my explanation lacked clarity:
HTML:
<div id="page1">
<select id="tango">
<option>Jester</option>
</select>
</div>
<div id="page2">
<div id="dialog">
<!-- Select Menu would be inserted/moved here -->
</div>
</div>
JavaScript:
$('select#tango').insertAfter('#dialog');

Using the $('select#tango').insertAfter('#dialog'); script would actually result in:
<div id="page2">
<div id="dialog">
</div>
<!-- Select Menu would be inserted/moved here -->
</div>
I think what you'd really want to have it placed where you wish would be:
$('select#tango').appendTo('#dialog');

My question is, can I use insertAfter() to move the select box from
one page/div to another? Or, more specifically, is there any reason I
shouldn't?
No, there's no reason why you can't or shouldn't do this.

There's nothing wrong with it. Here is a working demo http://jsfiddle.net/pomeh/FA23E/
HTML code
<div id="page1">
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div id="page2">
<div id="dialog">
<!-- Select Menu would be inserted/moved here -->
</div>
</div>
<input type="button" value="Dance for me !" />
Javascript code
var clicks = 0,
$select = $("select"),
$targets = [ $("#dialog"), $("#page1") ];
$("input").on("click", function() {
var $target = $targets[ clicks++ % 2 ];
$select.appendTo( $target );
});