<div class="demo_restaurant">
<li class="school" onclick="dropdown(this)">
<span class="icon glyphicon glyphicon-education">
</span>
<span id="1" class="school_title item_title">ABC
</span>
</li>
<li class="school" onclick="dropdown(this)">
<span class="icon glyphicon glyphicon-education">
</span>
<span id="2" class="school_title item_title">WXY
</span>
</li>
</div>
I was trying to get the li id value when someone click on that li with following code:
$(".demo_restaurant li span").on("click", function (argument) {
alert($(this).attr('id'));
});
But the problem is when i added more li with append after ajax call. Then li onclick doesn't work. In that append elements can't call that click function though it's there in HTML. How can i make it work?
Try this:
$('.demo_restaurant').on('click', 'li span', function(argument) {
alert($(this).attr('id'));
});
Explanation:
When elements are added to the DOM dynamically, you need
to tell jQuery to listen for events on the closest parent that was
there when your handler was bound. (Note that it would also work with any further parent, up to document, but it is considerably less optimal.)
Another way would be to bind the handler to your added DOM everytime you add some new content.
Related
I want to trigger an on click event for my <i> tag. I added an ID to it but if i try use:
$("#delete-playlist-song").on("click", function() {
console.log("in"); //doesnt trigger
});
It won't trigger so I want to try a different approach? Something like:
$("master-playlist-entries").find("i.pl-action").on("click", function() {
console.log("in"); //Won't work
});
My HTML code:
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span></li>
</ul>
What I did try was an onclick event to call a function which worked but you see, I want to grab the data-path information and pass it to that function so I can use: $(this).attr("data-path") which will return a different link each time for different li.
Any help will be appreciated!
Your original code works in a one item snippet, https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/ so I have to guess as your example is incomplete:
It is not shown, but I would guess you have multiple <i> elements with the same id (e.g. id="delete-playlist-song). If that is the case it simply will not find any except the first one as browsers use a fast-lookup cache which can only have one element stored against each ID value. IDs must be unique on a HTML page to work property.
Switch to using classes instead and use a delegated event handler.
https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/
e.g.
$(document).on('click', '.delete-playlist-song', function() {
$(this).closest('li').slideUp();
});
Notes:
You should connect delegated event handlers to a non-changing ancestor element, but document is the best default if nothing else is close. Do not use body as it has a bug to do with styling that can cause mouse events to not fire. Use document as your friendly backup as it also exists before DOM ready.
I guess your html is added dynamically - so register the click listener dynamically using this:
$("body").on("click", "#delete-playlist-song", function() {
And for getting the attribute data-path you can use $(this).closest('li').attr("data-path") inside the listener.
See a demo below:
$("body").on("click", "#delete-playlist-song", function() {
console.log($(this).closest('li').attr("data-path"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span>
</li>
</ul>
I have this html code below with the caret class fa fa-caret-down. Now I want that if the user clicks on the caret, the caret-down class shall gets removed and get replaced with the fa fa-caret-up class. And the same again, if he klicks on the caret-up class, it shall get back to the caret-down class.
( any other way is also okay ). I've tried this:
$(document).ready(function() {
$('.fa-caret-down').on('click', function () {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
});
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});
[ This toogle also runs very bad with this code ]
But this only works for the first part. If I'm trying to get back to the caret-down, nothing happens.
Thats my HTML:
<div id="acc-construct" class="hidden">
<div class="acc-group">
<div class="acc-head">
<a class="acc-toggle collapsed acc-default" data-toggle="collapse"
data-parent="#acc" href="#collapse-divsInContainer">
<i data-arrow="" class="pull-right fa fa-caret-down"></i>
</a>
</div>
<div id="collapse-divInContainer" class="acc-body collapse">
<div class="acc-inner">
<dl class="dl-horizontal"></dl>
<div class="separator"></div>
</div>
</div>
</div>
</div>
I'm still new in jquery/Js and sorry for my bad english.
Thanks for any help !
Set another class (caret-icon) on the caret element and attach click event to that class:
<i class="caret-icon fa fa-caret-down"></i>
And use toggleClass() method:
$(document).on('click', '.caret-icon', function() {
$(this).toggleClass('fa-caret-up fa-caret-down');
})
Use 'if - else' condition with 'hasClass' method.
Here is the Jquery
$(document).ready(function () {
$('.fa-caret-down').on('click', function () {
if ($(this).hasClass('fa-caret-down')) {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
}else{
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});
$('.fa-caret-down') finds the DOM - elements that have the class fa-caret-down when the code is executed, in your case after initialization. These elements get a click handler that removes fa-caret-down and adds fa-caret-up. The elements that have this handler don't change later. So, a second click on one of the elements also removes fa-caret-down and adds fa-caret-up.
You have to check in the handler if the element currently has class fa-caret-down or fa-caret-up. If it has class fa-caret-down you have to remove fa-caret-down and add fa-caret-up. If it has class fa-caret-up you have to remove fa-caret-up and add fa-caret-down.
Your current code $(this).removeClass('fa-caret-up').addClass('fa-caret-down'); does not help because it is executed only one time after initialization.
I would like to use Jquery to loop through all of li elements like below:
I know by using "each" can loop through all the elements, but I dont know why I cant get them.
Can someone give me some ideas about this, or let me know how to click all of the <li> elements within the <ul> element.
Here is my HTML:
<ul class="test">
<li ct-tracking="FiltpickupType" ct-tracking-value="Test:1">
<span>Test 1</span>
</li>
<li ct-tracking="FiltpickupType" ct-tracking-value="Test:2">
<span>Test 2</span>
</li>
</ul>
you can add an onclick event in your <li>
<ul class="test">
<li ct-tracking="FiltpickupType" ct-tracking-value="Test:1" onclick='alert($(this))'>
<span>Test 1</span>
</li>
<li ct-tracking="FiltpickupType" ct-tracking-value="Test:2" onclick='alert($(this))'>
<span>Test 2</span>
</li>
</ul>
and in you js code you can just write.
$(function(){
$('.test li').each(function(index, element){
//console.log($(element).click());
$(element).click();
});
});
here's a working JSFIDDLE
Just a simple:
$(".test li").click();
jQuery by itself will run the click for every element in the resulting query.
JSFiddle: https://jsfiddle.net/kk2er5vz/
If you want to take control during the click process, you can use each function to iterate through the items and click each one:
$(".test li").each(function(index, element) {
$(element).click();
});
I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();
i am trying to remove parent tag,
but removing parent tag should not remove their child element.
The child should get attached previous tag
Below is the code:
<div class="mask">
<ul id="TickerT" class="news">
<ul class="tweet_list">
<li class="first odd">
<span class="tweet_time">about 8 minutes ago</a></span>
<span class="tweet_join"></span>
<span class="tweet_text">test test…</a></span></li>
</ul>
</ul>
</div>
</div>
There are at-least 5 <li> and now i want to delete <ul class="tweet_list">.
I have tried it with jQuery's replaceWith but no result.
Here's the code i have used from a site
var jj = $("ul.tweet_list").contents()$(".tweet_list").replaceWith(jj);
But this didn't worked.
What i wanted is i want to remove <ul class="tweet_list"> but not <li> of that <ul>.
Help appreciated, Thanks..
You can call the unwrap() method on your list item:
$("ul.tweet_list > li").unwrap();
This will remove the .tweet_list <ul> element and reparent the <li> element (and its siblings, if any) under the #TickerT <ul> element.
Just use the .unwrap() method:
$('.tweet_list').children().unwrap();
DEMO
var jj = $("ul.tweet_list").html()
$("ul.tweet_list").replaceWith(jj)
There is no content method on jquery. Try the html method.
You could save the .html() content and the parent ul of the list you want to delete into a variable and then add the .html() to the parent ul.