javascript click event not firing - javascript

I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.
HTML CODE
<div class="col-6">
<div class="js-list-item">
<h3 class="js-list-title"></h3>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<p>Date: <span class="js-date"></span></p>
<p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
</span></p>
</div>
</div>
javascript code
function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
console.log('test');
e.preventDefault();
deleteShow(
$(e.currentTarget).closest('.js-list-item').attr('id')
);
});
}

The second parameter of the .on() function is a selector.
http://api.jquery.com/on/
Change:
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
to:
$('.js-list-item').on('click', '.fa-trash-o', function(e) {

('click', 'fa-trash-o', function(e)
fa-trash-o is not a proper selector, use class or id

Related

Remove input by clicking times icon

I have the following code which adds divs within a container (#subtask_container) via clicking a link (similar to Google Tasks):
HTML:
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
JS (this successfully adds unique inputs within the subtask container div along with a clickable x after each input)
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted"></i><br>');
i++;
});
What logic do I need to add to the x class to remove it's associated input?
I've tried
$('.fa-times').click(function(){
$(this).prev('input').remove();
});
but it doesn't seem to work...
Thanks!
You can simply wrap your subtask append in a div and simply use .parent() and .remove() function on that. No need to use <br>
Also, do not use .fa-times as primary click event handler as you might have other fa-times on the same page as well Which might cause issues later on. Add a custom class to your fa item (.subtask_remove_icon)
Live Demo:
var i = 1
$("#add_subtask").click(function() {
$("#subtask_container").append('<div><input name="subtask' + i + '" class="mt-1" id="subtask' + i + '" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted subtask_remove_icon"></i></div>');
i++;
});
$(document).on('click', '.subtask_remove_icon', function() {
$(this).parent().remove(); //remove the input when X clicked
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
The event handler gets attached to all elements that are on the page load. Since the icons are appended, the right way to do this would be the following:
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<div><input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted removeIcon"></i><br></div>');
i++;
});
$(document).on('click', '.removeIcon', function(){
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>

jQuery sidebar will toggle, but won't slideback

I have a jQuery slider that when clicked, will fire the else before the if. I am not to sure why this is doing this. I need it so when the element is
If any one knows how to fix this, that would be great!
<div class="sidebar-mob" onclick="sidebarPull()">
<i class="fas fa-angle-right"></i>
</div>
function sidebarPull(element) {
if ($(element).data('clicked')) {
$(".content").css("margin-left", "100%");
$(".sidebar").css("margin-left", "-7%");
$(".sidebar-mob i").css("transform", "180deg")
console.log("if-clicked");
$(element).data('clicked', false)
} else {
$(".content").css("margin-left", "0%");
$(".sidebar").css("margin-left", "-100%");
$(".sidebar-mob i").css("transform", "180deg")
$(element).data('clicked', true)
console.log("else-clicked");
}
};
You are not passing the element argument in to the function. Add this to the function call:
<div class="sidebar-mob" onclick="sidebarPull(this)">
<i class="fas fa-angle-right"></i>
</div>
That being said, you can tidy this up a lot by using unobtrusive event handlers. Inline event handlers are outdated and should be avoided where possible. Try this:
<div class="sidebar-mob">
<i class="fas fa-angle-right"></i>
</div>
$(function() {
$('.sidebar-mob').click(function() {
var $el = $(this);
var clicked = $el.data('clicked');
$(".content").css("margin-left", clicked ? "100%" : '0%');
$(".sidebar").css("margin-left", clicked ? "-7%" : '-100%');
$(".sidebar-mob i").css("transform", "180deg")
$el.data('clicked', !clicked)
});
});

Why does this event.target.previousElementSibling not work?

so ive got this code
<div class="col-lg-12 video-meta">
<div class="container">
<span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
<a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
</span>
and i target it with
$('.like').on('click', function(event) {
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
console.log(isLike);
and it returns "true" in both cases, why?! is there a reason for this? ive been on it for 4 hours straight now and it worked ONCE , i did change nothing just took a break and then it didnt work after my break? i think this is some kind of bad joke. what am i missing here?
it should basically take the "like" class, and as the first a tag has no previousSiblingElement which is null, it should return true, but the second has an element with the same tag as a sibling and still returns true..
event.target is the <i> element, because that's the element on which the click really occured.
If you want the <a> (on which you did attach the event handler), you need to request event.currentTarget or even just this:
$('.like').on('click', function(event) {
event.preventDefault();
console.log(event.target); // <i>
var isLike = event.currentTarget.previousElementSibling == null;
console.log(isLike);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
<div class="container">
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
<a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
</span>
</div>
</div>

Prevent parent mouseout jQuery event to trigger on child

This is probably a known issue or question. However, I only see results for
Element.on('click', callback)
events and I do not know how to do this with and on 'mouseout' event
This is my HTML:
<div class="oneTodo">
<div class="todoText"></div>
<span class="eraseTodo">
<i class="icon ion-ios-close-outline"></i>
</span>
</div>
And my script:
$('.oneTodo').hover(function () {
$(this).find('.eraseTodo').fadeIn(100);
});
$('.oneTodo').on('mouseout', function() { // this is what is not working
$(this).find('.eraseTodo').fadeOut(100);
});
Basically when I hover over my:
<span class="eraseTodo">
<i class="icon ion-ios-close-outline"></i>
</span>
since it basically is not the .oneTodo div anymore it fades Out. I want to prevent this. How can I achieve this?
P.S: I tried:
$('.oneTodo:not(.eraseTodo)').on('mouseout', function() {
$(this).find('.eraseTodo').fadeOut(100);
});
but failed miserably.

Find element and see if its active/hasClass

I am trying to access a button in my leaflet map. The button is created using a plugin "easy-button".
My main goal is to see if the button has been clicked (is active), I will use it for validation in another function, not shown here.
This is how the html for the button looks like in the browser debugger (I believe the html is created by the plugin?).
Before it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg"></span>
</span>
</button>
After it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo"></span>
</span>
</button>
This click function access the button and show 'Button was clicked' but the if statement does not pass. I got to the button using Copy CSS path in the browser, but it seem really long.
$("div.leaflet-bar.easy-button-container.leaflet-control > button > span").click(function(){
alert("Button was clicked");
if
($('span').hasClass('fa fa-crosshair fa-lg'))
{
alert('My button has active class')
}
});
Any advice on what I am doing wrong?
This
if($('span').hasClass('fa fa-crosshair fa-lg'))
Will not target the span you are expecting it to.
You wanted
if($('span',this).hasClass('fa fa-crosshair fa-lg'))
To target the child span of the span you clicked on
Run this example, hope it helps:
$(document).ready(function() {
// My example to trigger the click on buttons..
$("button > span > span").click(function(){
alert("Button was clicked");
if (
//$(this).hasClass('fa') && <-- You don't need it, both have it
$(this).hasClass('fa-crosshairs') &&
$(this).hasClass('fa-lg')
) {
alert('My button has active class');
} else {
alert('Ops..');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Unclicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg">click me</span>
</span>
</button>
<!-- Clicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo">clicked</span>
</span>
</button>

Categories