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

Can I use a <button> instead of <a> to go to #location?

I have this code.
<li class="active">
Weekly Payment
</li>
<li>
Advance Payment
</li>
<li>
Expenses
</li>
My question is that can I use <button> instead of <a> to achieve this? I changed it to buttons but they are not working.

Yes. Use <button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>

You can't use href in button but you can use data-href attribute to do this work. When button clicked get value of data-href and use window.location.hash to going to target id.
$("button").click(function(){
window.location.hash = $(this).data("href");
});
#first, #second, #third {
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>

You can try to take a look at this
Or you can create a button with a <a href> inside of it. I dont know wat you are trying to achieve with changing it into a button?
<button type="button">
hello
</button>
if it is for the style you can just apply a style to the a tag like this Go to Google
Goodluck!

Whenever you use #something in an anchor tag's href attribute it actually take you to an element in same page who's id is 'something'. You can use it like this as well:
click
In this case it will take you to the anotherpage.aspx page's element who's id is 'something'.
Now the purpose of button is completely different, but there are some ways to satisfy your requirement but that is not recommended. You should use anchor tag in this situation.
Here is a great link to show the difference between anchor and button tag. Check it.
Thanks.

Button does not have href functionality, so unless you use some JS functions to simulate this - No, you can't

You can use the styles over <a class="your-btn-style"> to show your anchor like a button.
If you are using bootstrap, you can simply add class="btn btn-primary" in your anchor for example :
Advance Payment
I also used this approach in my project :

Using href attribute for button element

I need that use href="" attribute for button
like this <button href="link">click me</button> Instead of <a href="link">
that's wrong .
I think that I've to try this code
<button onClick="FN('MY Link For Example www.stackoverflow.com')" >click me</button>
<script>
function FN('URL'){
--> Go to MY Link For Example www.stackoverflow.com
}
<script>
So what do u guys suggest I should do ?

Try this. This will navigate to the link on click.
<button onclick="window.location.href='http://www.stackoverflow.com'">click me</button>

Why you don't use <a type="button" href=""></a>
Or if you really want a button, so <button onclick="window.location.href=""></button>

I think this will solve your problem
<a href="http://www.stackoverflow.com/">
<button>click me</button>
</a>

href attribute can not be used on button tag , if you want button like appearance for your a tag you can use add style to your a tag and make it look like button , add bootstrap reference then add button class to your anchor tag.
Custom Bootstrap Button , but if you still want to use button tag then adding onclick event is better option

onclick property in img tag in .append from jquery

I'm trying to add some tags in a from the js code
I found an interesting function in jquery: append x)
I got this in my .js:
function goClick(target) {
}
function clickChapDiv(event) {
$(event.currentTarget.parentNode).append("<span> <img src=\"../images/popUp.png\" /> <span class=\"textPopUp\"> <span class=\"notePopUp\">B-</span> <span class=\"titlePopUp\"> 3-JE TESTES </span> <img src=\"../images/minigo.png\" class=\"buttonPopUp\" onclick=\"goClick(this);\" /> </span>");
}
But this isn't working, if i remove the onclick=\"goClick(this);\", it's working but there is no event on the (normal...)
Is someone has an idea of my problem ? cause i saw some code on internet with onclick event in the .append and their code was working...
Thanks for your futur answers

Here is your code below. it is not fully closed which may be causing your problem
<span>
<img src=\"../images/popUp.png\" />
<span class=\"textPopUp\">
<span class=\"notePopUp\">B-</span>
<span class=\"titlePopUp\"> 3-JE TESTES </span>
<img src=\"../images/minigo.png\" class=\"buttonPopUp\" onclick=\"goClick(this);\" />
</span>
Add the extra span at the end.
Also you need to bind the click event when the element is added to the DOM.
Instead you want to use .live. See here.
$(".buttonPopUp").live("click", function(){
goClick(this);
})

How to open a hyperlink on the same page with javascript?

I am using this to open on a new window:
<div class="backbutton" OnClick="javascript: window.open('http://www.goesback.com')">Go back</div>
How to amend this if I want onclick to open a hyperlink on the same page?
thanks.

You just set the url to the window.location.href
so
<div class="backbutton" OnClick="window.location.href = 'http://www.goesback.com'">Go back</div>
But you should really just convert it to a regular link
<a class="backbutton" href="http://www.goesback.com">Go back</div>

location.href='http://www.goesback.com'
Though you might want to reconsider using onclick to trigger that.

Why not just use a simple anchor tag?
Go There
If you need to use JavaScript, the other answers - setting the window.location property - will do what you want.

The second parameter of window.open() is a string representing the name of the target window.
Set it to: "_self".
<div class="backbutton" OnClick="javascript: window.open('http://www.goesback.com','_self')">Go back</div>

Set the window.location.href property:
<div class="backbutton" OnClick="window.location.href='http://www.goesback.com'">
Go back
</div>
Or just use a plain old anchor (probably your best option):
Go back
Note: the javascript: prefix is not needed in the onclick handler.

<div class="backbutton" OnClick="window.location.href = 'http://www.goesback.com'">Go back</div>