We Keep Coding

#click event not triggering alongside element with #blur

I've got a problem when working with VueJS which is kinda getting on my nerfs since I know that it probably relies on something very small but still I'm here trying to get it running for hours.
I'm using a template which should represent a searchbar with the solutions under it. To show the solutions, I'm looping over an object (I'm not done including the filtering of the solutions to that point - wanted to finish this one first). The thing I was trying to do now was filling in the searchbar value with the value I select in the solutions (passing it with a click event). But somehow my click event doesn't trigger.
I've got the following code-snippet:
<template>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">🔍</div>
</div>
<input
type="text"
class="form-control"
#focus="searchFocus = true"
#blur="searchFocus = false"
v-model="searchQuery"
placeholder="Search for vehicles..">
<div class="container p-0">
<div class="dropdown-menu search" v-show="searchFocus">
<a class="dropdown-item bus" href="#"
v-for="vehicle in vehicleObjects"
:key="vehicle.id.key"
v-on:click="setSelectedToQuery(vehicle)">
<span class="ml-4">Bus {{ vehicle.id.name }}
<span class="badge badge-secondary"> {{ vehicle.licenseNumber }}</span>
<span>
</a>
</div>
</div>
</div>
</template>
Am I missing something quite obvious? How can I get the click-event running/triggering?
Thanks in advance
Best Regards

There are few things "off" I'll list them by level of impact
#blur fires before click, essentially invalidating #click
anchors <a ...> need to prevent redirect. You can use #click.prevent="... to prevent event propagation, or use another element, since you don't have href defined anyway.
one of your span elements is not closed (<span> instead of </span at the end)
To handle #blur blocking #click, you could use #mousedown instead of #click, since it executes first.

Maybe it's the solution: close your last span
Click work for me: https://codesandbox.io/s/morning-browser-fgftf

How can I add a link to an image opened in a lightbox leading to external ".html"?

I have a gallery in which the images that are clicked open in a lightbox. I want to add the option that the OPENED image can then be clicked again to link to an external page.
I already tried to wrap the tag in another tag - what was of course not successful - and was looking for some "data" code to add to the "href" line... but found nothing so far. Here is the code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox"href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I want the image link to the page where the project is described in detail BUT also want the viewer to be able to see the zoomed version of the image... Hoping for some help. Thanks

Have you tried putting the link tag inside the span?
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);">
Visit W3Schools
</span>

Input checkbox inside an anchor tag

I have the following structure in my html code. Due to unavoidable circumstances I can't change the html structure. I want both Link and the checkbox to be worked independently. How this can be done via Javascript or Jquery ?
<a href="#">
<span class="fa fa-chevron-right blue"></span>
Early Math
<label class="label-checkbox">
<input type="checkbox" data-field-type="checkbox"><i class="fa fa-2x icon-checkbox"></i>
</label>
</a>

I do not believe that a checkbox inside of an anchor can be made to work reliably. But even if you are unable to change the HTML directly, you can still manipulate it through Javascript/JQuery:
$(document).ready(() => {
$('a input').insertAfter("a");
});
(This does assume only one <a> tag and one <input> tag).

Open Accordion only on click of the right symbol

I would like to disable the click event that opens the accordion if I click anywhere on the heading.Instead I would like to click only on the right most symbol....
Here it's opening if I click on the Save button..
<accordion-group is-open="status.open" template-url="accordion-group.html">
<accordion-heading>
I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here's the plunker..
link

in your html file i modified:
<accordion close-others="oneAtATime">
<accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html">
<accordion-heading style="pointer-events:none !important;">
I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
You should add css property: "pointer-events: none !important" on elements which you won't to react on mouse click event, and set "pointer-events: auto !important" on your icon indicator only. The accordion should be opened only when you click on the arrow icon. That should work :)
To make your solution more elegant you can make CSS classes like:
.disable-click-event {
pointer-events: none !important;
}
.enable-click-event {
pointer-events: auto !important;
}
There's also an option that prevents event bubbling ($event.stopPropagation()) but in this case i dont know where exactly event is invoked so it needs hard investigation to find it out.
One more hint: if any problem can be solve with CSS instead of JS it's completly worth to do it :) JavaScript events are not so easy to debug, so CSS fix will be much faster to find than dirty bug with event bubbling. I can recommend you to use simple CSS solutions with a clear conscience :) cheers

Insert <a> Into a div generated by a plugin with javascript or jQuery

I am working with a plugin that provides IDX data for listings on a WordPress website. The plugin uses jQuery to query a database for information that it displays on the page. The plugin is not very customizable past simple styling and I would like to insert a link to save to favorites
The link for saving to favorites can be found by viewing this page:
http://angelandpatty.com/homes-for-sale-details/8635-La-Entrada-Avenue-Whittier-CA-90605/PW14217291/306/
All the property details pages have the "save to favorites" button at the top of the page. This is what I found with the inspector:
<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>
I am assuming the data-target is what is causing the button to take action.
What I would like to do is find a way to insert this same button, perhaps with a different icon like a thumbs up or a star, into the property stubs.
The property stubs are viewable on pages like this:
http://angelandpatty.com/homes-for-sale-in-friendly-hills/
I would like to find a way to insert this possibly after #ihf-main-container .col-xs-9
If there is any way to do this with Javascript or with jQuery I sure would like to know.
Thank you for all of your assistance. I tried searching for some situation like this but was unlucky

Are you looking for the following answer?
var button = $('<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>');
$('#ihf-main-container .col-xs-9:first').after(button);
See: http://api.jquery.com/after/
.after(content [, content ] )
Description: Insert content, specified by the parameter, after each element in the set of matched elements.
You may need to initialize the button as required.