Onclick event is just not working for me. When mouse in over some div, I dynamically insert some icons using .html() function, and want to set onclick on that icons but i can't. I also tried setting click listener for the static enclosing div (jquery .on('click', ..) function) or for the whole page but it's no use, as if those icons just swallow the click event... Any ideas?
<div id="rating" class="pull-right rating-box clearfix">
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
Here is html
I have tried a lot of way of doing, but here is the latest thing i tried
$(document).ready(function()
{
//some code
$('#rating').html(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });
});
Use the .append() method instead:
$('#rating').empty();
$('#rating').append(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });
jsFiddle
See jquery .html() vs .append() for more information.
Related
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).
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have 2 links:
<span id="a-start-container">
<a id="a-start" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
<span id="a-stop-container">
<a id="a-stop" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
When I click on the first one (a-start) I'm disabling it by removing the <a> element and at the same time I enable the second one (a-stop) by adding the <a> element:
$(document).ready(function() {
$("#a-start").click(function(e){
$("#a-stop-container").html("<a id='a-stop' href=''><i class='fa fa-fw fa-stop inner-circle-color'></a>");
$("#a-start-container").html("<i class='fa fa-fw fa-play inner-circle-color'>");
})
});
When I click on the second one (a-stop) I'm disabling it by removing the <a> element and at the same time I enable the first one (a-start) by adding the <a> element:
$(document).ready(function() {
$("#a-stop").click(function(e){
$("#a-start-container").html("<a id='a-start' href=''><i class='fa fa-fw fa-play inner-circle-color'></a>");
$("#a-stop-container").html("<i class='fa fa-fw fa-stop inner-circle-color-off'>");
})
});
The problem is that it works only for the first click. For example I click on the first one (a-start), then it changes a-start and enables a-stop. But then, when I click on a-stop, JavaScript does not react anymore. The same situation the other way round. Both work fine until the <a> element gets changed - then I have to reload the page to get it run again.
There is no information in the console.
What am I doing wrong?
you should consider changing it to on instead of click based on the pattern that you are using. Usage of on can be found her: http://api.jquery.com/on/
What you are doing is replacing entire DOM content on which handler/listener is registered and thus it dont get re-registered on DOM change which is happening after first click event.
However what seemed like you only wanted to toggle class-name and text of the link which should have been handled via http://api.jquery.com/toggleClass/ which would be more appropriate.
I have a simple link that will fire an ajax call and change a status, and I want that new status reflected (instantly) on the modal form.
Problem is: when I click the link that is on the modal form (below), nothing happens.
<a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>
In $(document).ready(), I have this:
$("#autoplayStatus").click(function(event){
alert('test');
})
Is there something I should do to ensure that jQuery can select and bind to objects on a modal form?
To ensure that jQuery binds to buttons (or other stuff) in modals created by Bootstrap, you should write your event handler like this:
$(document).ready(function() {
$('.container').on('click', '#autoplayStatus', function() {
alert('Ohai!');
});
});
and then, in my example, wrap the anchor tag in a container:
<div class="container">
<a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>
</div>
On a sidenote, it's better practice to use <button> instead of <a> when creating, well, a button. =)
I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!
Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})
the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})
Should be:
$(this).next('.show-share-box').slideToggle('slow');
$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');
Whay I want to acomplish is use icons from fontawesome on my JQuery sliders, so I am pretty much trying to insert HTML code into the a that serves as the container for the handle.
This is my JavaScript
$(document).ready(function () {
$(function () {
$("#slider-vertical").slider({
orientation: "vertical"
});
$("#amount").val($("#slider-vertical").slider("value"));
});
$('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');
});
And this is the HTML for the said slider
<div id="slider-vertical" class="blue">zing</div>
Weird thing is I tried to target the outer part of the slider and that worked
$('#slider-vertical.blue').append('<i class="fa fa-bars"></i>');
, I don't understand why it won't put it inside the handler.
I expect something like this as output
<div id="slider-vertical" class="blue">
<a class="slider-handle">
<i class="fa fa-bars"></i>
</a>
</div>
It does add the element, which is visible. http://jsfiddle.net/LZx5L/1/ This is your problem
$('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');
There is no a.slider-handle, it's a.ui-slider-handle
$('#slider-vertical.blue a.ui-slider-handle').append('<i class="fa fa-bars"></i>');
However, There's no reason the icon has to be an <i>. Adding the classes to the element is the simplest solution.
$('#slider-vertical.blue a.ui-slider-handle').addClass('fa fa-bars');
http://jsfiddle.net/LZx5L/