I'm making the twitter follow button , when you click on it it turns to following, when hover again it turns to unfollow , when click on unfollow , it becomes follow and here even if the mouse goes out nothing happens , my problem is something happens here .. (last step)
HTML:
<div class="col-xs-2 menu followBlock">
<button type="button" class="btn btn-primary btn-lg" data-follow="follow">
<span class="glyphicon glyphicon-plus"></span> Follow
</button>
</div>
JS:
$(".followBlock").on('click', "button[data-follow=follow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-ok'></span> Following").removeClass('btn-primary').addClass('btn-success');
$("button[data-follow=follow]").attr("data-follow", "unfollow");
$btn.hover(function(e) {
$(this).html("<span class='glyphicon glyphicon-minus'></span> Unfollow").removeClass('btn-success').addClass('btn-danger');
}, function(e) {
$(this).html("<span class='glyphicon glyphicon-ok'></span> Following").removeClass('btn-danger').addClass('btn-success');
})
});
$(".followBlock").on('click', "button[data-follow=unfollow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-plus'></span> Follow").removeClass('btn-danger').addClass('btn-primary');
});
The jsfiddle that explains my problem:
jsfiddle.net/TQ5nn/1/
Help please
try this
$(".followBlock").on('click', "button[data-follow=unfollow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-plus'></span> Follow").removeClass('btn-danger').addClass('btn-primary');
$btn.unbind('mouseenter mouseleave');
$btn.attr('data-follow', 'follow');
});
jsfiddle
Related
I am having trouble with a very simple thing. I have two buttons inside a dropdown, and I can't detect when the user click on them. The rest of the buttons works well, less this two.
The buttons are:
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Nodes</button>
<ul class="dropdown-menu" id="NodeFilters">
<button type='button' class='btn btn-secondary btn-sm' id='allFilter'>All</button>
<button type='button' class='btn btn-secondary btn-sm' id='cleanFilter'>Clean</button>
</ul>
</div>
My function is:
//This function controls if some button is clicked
function btnController(){
$('.btn').click(function(){
let id_btn = $(this).attr("id");
console.log(id_btn);
if(id_btn == 'allFilter' | id_btn == 'cleanFilter'){
alert('sss')
}
});
}
$(document).ready(function() {
btnController();
} );
When I click the rest of the buttons, the console.log(id_btn); prints the id of the button. But when I click these two buttons inside the dropdown, nothing happens. Why is this happening?
Note: When I click these buttons, the dropdown always gets closed.
Can somebody help me? Thank you very much!
Use event delegation like this:
$(function(){
$(document).on('click', '.btn', function(){
let id_btn = $(this).attr("id");
console.log(id_btn);
if(id_btn === 'allFilter' || id_btn === 'cleanFilter'){
alert('sss')
}
})
})
I'm attempting to run some JQuery when clicking on a List Item but the click event does not seem to fire when checking in debugger.
The Script is:
$(document.body).on('click', '.range', function (event) {
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);
$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});
And my HTML is:
<div class="button-group">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a product category <span class="caret"></span></button>
<ul id="RangeDropDown" class="dropdown-menu col-md-12" data-url="/Home/GetRangeForCorp">
<li class="range" data-value="1">Articulated Dump Trucks</li>
...
</ul>
</div>
<div class="button-group" style="display: none;">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a machine type <span class="caret"></span></button>
<ul style="display: none;" id="MachineTypeDropDown" class="dropdown-menu col-md-12"></ul>
</div>
it should work
with test code
$(document.body).on('click', '.range', function (event) {
alert("test");
});
look at this fiddle
https://jsfiddle.net/d15czyt3/
i suspect your get is failing
Your code work "fine", the problem should be that the event is propagating to it's parent...
This solve it:
$(document.body).on('click', '.range', function (event) {
event.stopPropagation();//-> the event execute 1 time the code!
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);
console.log(url2 + " | " +rangeid);
$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});
event.stopPropagation()
, check also if url2 is getting the url you really want (if it's correct) and you may want to use post instead of get, because get to increase performance uses "web cache information"
I have an anchor to open a modal:
<a href="#delete-{{ $id }}" class="btn btn-danger btn-xs btn-delete btn-fla details" data-toggle="modal" data-target="#remove_property_modal">
<i class="fa fa-trash"></i>
</a>
The problem is that the url is not changing from http://example.com into http://example.com/#delete-4 .
Change url hash on show.bs.modal event of bootstrap modal (docs)
$(document).ready(function () {
$('.modal').on('show.bs.modal', function (e) {
if (typeof (e.relatedTarget) != "undefined") {
window.location.hash = $(e.relatedTarget).attr('href');
}
});
});
I'm using the 'data-toggle'-option from Bootstrap for a button. In the button I have a with glypicons and sometext. However, when you click on the text it works, but when you click on the glyphicon it doesn't trigger the data-toggle.
Since the data-toggle does not work in JSFiddle I cannot post a link to it.
HTML:
<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>
JavaScript:
document.getElementById("showHide").onclick = function () {
if ($("#showHide").text() == " show") {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
document.getElementById("showHide").blur();
} else {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
document.getElementById("showHide").blur();
}
}
I've looked online but haven't found a solution or someone with the same problem.
It appears the span is being replaced before the toggle event is propogated. You can use the button method to activate the toggle rather than the data attribute.
<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button>
document.getElementById("showHide").onclick = function () {
if ($("#showHide").text() == " show") {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
jQuery("#showHide").button('toggle');
document.getElementById("showHide").blur();
} else {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
jQuery("#showHide").button('toggle');
document.getElementById("showHide").blur();
}
}
View Fiddle
I have following html.I have implemented following jquery code but my delete button clicking two times.Basically one edit and one delete.When I click on edit only one click happens but when I click on delete , first delete button trigers then edit.How can I avoid this.please check my code.
$(".tools").live("click", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
$(".tools").find('span').live("click", function(e){
e.preventDefault();
alert('clicked on delete');
var n = $("a", this).attr('id');
alert(n);
});
<div class="tools">
<a href="#" class="btn acebtn btn-minier btn-info" id="edit_'."$count".'">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
<span class="dlt">
<a href="#" class="btn acebtn btn-minier btn-info dlt" id="delete_'."$count".'">
<i class="icon-only ace-icon fa fa-share"></i>
delete
</a>
</span>
</div>
Your click event on the span (delete button) is bubbling up and triggering the click event on the .tools element, which is your edit button.
You can prevent the event from bubbling up using event.stopPropagation():
$(".tools").find('span').live("click",function(e){
e.preventDefault();
e.stopPropagation();
alert('clicked on delete');
});
Side note: .live() is deprecated as of jQuery 1.7, in favor of .on().
put $(".tools").unbind('click') before $(".tools").live("click",function(e){...
here it is:
$(".tools").unbind('click');
$(".tools").live("click",function(e){ ....
//your script here