I've:
backdrop = document.getElementById('backdrop');
dialog = document.getElementById('dialog');
dialog_body = document.querySelector('#dialog .body');
document.addEventListener('click', function(e) {
if ( matches.call(e.target, '[data-show=dialog]')) {
buoy.addClass(backdrop, 'fadeIn');
buoy.addClass(dialog, 'fadeIn');
var href = e.target.parentNode.getAttribute('action');
dialog_body.innerHTML = '<div>FOOOOO</div>';
[].forEach.call(document.querySelectorAll('[data-hide=dialog]'), function(el) {
el.addEventListener('click', function() {
buoy.removeClass(backdrop, 'fadeIn');
buoy.removeClass(dialog, 'fadeIn');
})
})
}
}, false);
and [data-show=dialog] is:
<button type="sumit" class="btn xs default" data-show="dialog">
<i class="ellipsis-v"></i>
</button>
If I click on
<i class="ellipsis-v"></i>
the code doesn't work..
If I click out of
<i class="ellipsis-v"></i>
the code works perfectly..
Also if I have:
<button type="sumit" class="btn xs default" data-show="dialog">
<i class="ellipsis-v"></i>
<span>fooo</span>
</button>
If I click on
<i class="ellipsis-v"></i>
or
<span>fooo</span>
the code doesn't work..
If I click out of
<i class="ellipsis-v"></i>
or
span>fooo</span>
the code works perfectly..
What is the problem?
Why Not:
function handler(e){
var t=e.target;
if(t.dataset['show']=='dialog'||t.parentNode.dataset['show']=='dialog'){
/* code ...... */
}
}
document.addEventListener('click',handler,false);
in this case you have one eventHandler.(no loops).
you can add that handler to the parentNode for simplicity.
and you have to add a better check for t.dataset['show']=='dialog' as it produces an error if it has no dataset. (i wrote it just to give you an idea)
btw you search for data-hide but you have only data-show
if you have any questions just ask..
if i misunderstood your question tell me so i can reelaborate the code.
DEMO
http://jsfiddle.net/A7xk2/1/
Less eventHadlers is always more performance...
also in this example i'm just writing now... i need alot of mouse events and most of them are on the document itself...
http://jsfiddle.net/LxX34/12/
EDIT
Add the click handler on the btn elements
it works on span on li and on button as you can see in this example.
maybe your li has some sort of preventDefault or return false??
http://jsfiddle.net/A7xk2/2/
Related
I want to show some checkboxes onclick event but the problem is when I clicked first time nothing happened, but every next click on the button running well..
I tried some scripts and ways (for example to append return false; to the onclick="" event in button) which I found on internet but anything I found does not working for me as I expected.
The button which have to trigger the function:
<button id="brandbutton" type="button" class="button">FILTROVAT DLE VÝROBCE <i class="fas fa-caret-down"></i></button>
And the JavaScript snippet:
<script>
jQuery($ => {
$('#brandbutton').on('click', () => {
var html = "<?php echo get_some_tags_man(); ?>";
$("#someID").html(html).toggle();
$checkboxes = jQuery("input.brand:checkbox");
$checkboxes.change(function(){
window.location.search = '?product_tag=' + $checkboxes.filter(':checked').map(function(){
return this.value;
}).get().join(",");
});
});
});
</script>
The issue is because you've nested the jQuery change event handler for your checkboxes within the function called onclick of the button. This means that when you first click the button the change event is only bound to the checkboxes. On the next click the event handler is bound again and the previous instance runs.
To fix this, and correct the issue of repeated event handlers, bind the checkbox event handlers using a single delegated event handler outside of the button click. Also move the button click handler in to a unobtrusive event handler, not in the HTML.
Try this:
jQuery($ => {
$('#brandbutton').on('click', () => {
var html = "<?php echo get_some_tags_man(); ?>";
$("#someID").html(html).toggle();
});
$('#someID').on('change', 'input.brand:checkbox', e => {
window.location.search = '?product_tag=' + $checkboxes.filter(':checked').map((i, el) => el.value).get().join(",");
});
});
#someID {
display: none;
}
#brandbutton {
margin-left: 15%;
}
<button id="brandbutton" type="button" class="button">
FILTROVAT DLE VÝROBCE
<i class="fas fa-caret-down"></i>
</button>
Also note that the html() call on click of the button could be optimised by performing that call only once when the page loads, assuming that the content never changes - which it appears not to given the context of the example.
I'm a little stuck on the follow issue. I have a webpage that has a button when clicked it does some ajax things and if the result/response of that is successful then the buttons class is changed.
What I then want, if that changed button is clicked again, I want it to call a different function.
The first part works no problem. The ajax is called and the buttons class is changed so the colour and text of the button is changed. But when click the button again, I want to call the .btn.off function, but it remains to call the .btn.on function while I would have hoped it would call the .btn.off function.
Unfortunately, my knowledge of jQuery is not the best, any help in the right direction would be very much appreciated.
Thank you so much.
<button type="button" class="btn on btn-danger" id="123"><i class="fa fa-trash-o"></i><span>On</span></button>
<script>
$(document).ready(function(){
$(".btn.on").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn on btn-danger').addClass('btn off btn-success btn-sm');
$("span", this).text("Off");
});
$(".btn.off").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn off btn-danger').addClass('btn on btn-danger btn-sm');
$("span", this).text("On");
});
});
</script>
$('.btn').click(function () {
var btn = $(this);
var isOn = btn.hasClass('on');
if (isOn) {
// do something maybe call on function or write logic for on
} else {
// do something maybe call off function or write logic for off
}
btn.toggleClass('on off'); // flip the on <-> off switch
$('span', this).text(isOn ? 'Off' : 'On'); // was on before toggle so flipped
})
You can do this by checking the classes and take action
The issue is because you're dynamically changing the classes on the element at runtime. One way to work around this is to use delegated event handlers, like this:
jQuery(function($) {
$(document).on('click', '.btn.on', function() {
// AJAX...
$(this).removeClass('on btn-danger').addClass('off btn-success btn-sm').find('span').text('Off');
});
$(document).on('click', '.btn.off', function() {
// AJAX...
$(this).removeClass('off btn-danger').addClass('on btn-danger btn-sm').find('span').text('On');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<button type="button" class="btn on btn-danger" id="123">
<i class="fa fa-trash-o"></i>
<span>On</span>
</button>
I'm trying to read an attribute in my JavaScript-Function, so I can then further call a DELETE via AJAX with this attribute, but I already fail with retrieving the attribute by, what appears to me as, random. (jQuery version used for that is 3.2.1)
The "button" to start that chain (also already tried without the href and with href="#"):
UPDATE: Since it appeared as a comment, I indeed have something within the a-tag
<a class="btn btn-light delete-record" href="" data-id="5c25f547d42" title="Delete">
<i class="fa fa-trash"></i>
</a>
My JavaScript:
$(document).ready(function(){
$('.delete-record').on('click', function(e){
$target = $(e.target);
var id = $target.attr('data-id');
if(confirm('Entry with ID ' + id){
//AJAX
}
});
});
During testing with the confirm, I found out that my ID is sometimes set to undefined. Sadly I have no clue how this sometimes works and shows me the ID, and sometimes not.
Is there a solution to make this work with every click and not only about 24 out of the 42?
The issue is that when you click the icon inside the hyperlink, that the event bubbles up to the click handler. Inside the click handler, event.target will then refer to the icon element, which does not have the data-id attribute.
So the solution is to either:
1) Move the click event onto the icon and then make sure the hyperlink does not have any padding or other CSS styles that make the <a> clickable without also clicking the <i>.
2) Or check for which node was clicked inside the event:
var $target = $(e.target);
var id = $target.prop('tagName') === 'I'
? $target.parent().attr('data-id')
: $target.attr('data-id');
if (!id ) {
console.error( $target );
throw new Error( 'cannot find the correct id for target' );
}
else {
var is_correct_id = confirm( 'Entry with ID ' + id );
if ( is_correct_id ) {
//createAjaxCall( 'DELETE', 'somePath', id );
}
}
There are other methods to find the correct parent element, in case one day you change the structure and the icon is not an immediate child of the hyperlink anymore. But I don't use JQuery anymore, so I'll leave searching for the correct syntax for .findParent( 'a[data-id]' ) up to the implementer.
3) Or as you demonstrate, duplicate the id onto the icon. :)
The answer is actually based on Shilly's comment to the question.
Since I indeed got another element within my a-tag, the target was different depending on where I clicked the link/button. As an easy fix for that, I simply appended the ID to the i-tag as well:
<a class="btn btn-light delete-record" href="" data-id="5c25f547d42" title="Delete">
<i class="fa fa-trash" data-id="5c25f547d42"></i>
</a>
Did you tried to href="javascript" and also this could return list of elements so try to put the listener using an id like this
<a class="btn btn-light delete-record" id="deleteButton" href="" data-id="5c25f547d42" title="Delete">
$(document).ready(function(){
$('#deleteButton').on('click', function(e){
e.stopPropagation();
$target = $(e.target);
var id = $target.attr('data-id');
if(confirm('Entry with ID ' + id){
//AJAX
}
});
});
You should change your JS + HTML to this:
HTML
<button class="btn btn-light delete-record"
data-id="5c25f547d42"
title="Delete">
Click me!
</button>
Your problem with using <a> is that you don't stop the defaul behaviour of the <a> tag - which is a link. It's just refreshing the page (if you leave href blank). Changing it to a button is much better, as it's .. well a button in principle.
jQuery
jQuery(document).ready(function($)
{
$('.delete-record').click(function()
{
let id = $(this).attr('data-id');
if (confirm('Entry with ID '+ id)) {
//whatever
}
});
})
You don't need to get the target, just use $(this) to get the clicked element's data-attribute. Then carry on script as normal
You could try specifying the role of the anchor tag to button. Then you won't have to worry about specifying the href as the anchor tag will be treated as button.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Use event.preventDefault() as first line in your callback function for "click" or you'll be redirected to link or just reloaded.
<a class="btn btn-light delete-record" id="btnDelete" title="Delete">
$(document).ready(function(){
$('#btnDelete').on('click', function(e){
e.stopPropagation();
$target = $(e.target);
var id = $target.attr('data-id');
if(confirm('Entry with ID ' + id){
//AJAX
}
});
});
Or you can try
<a class="btn btn-light delete-record" id="btnDelete" href="javascript:DeleteRecord()" title="Delete">
<script>
function DeleteRecord(){
//Do your code here
}
</script>
Since you are tracking the click you should prevent the default behaviour of the click, so do like this:
$('.delete-record').on('click', function(e){
e.preventDefault();
(...)
});
you don't need to use the target, you can get the data attribute directly.
if you want to use a vanilla js approach:
document.addEventListener("DOMContentLoaded", function () {
//const records = document.querySelectorAll('.delete-record');
Array.from(document.querySelectorAll('.delete-record')).forEach(elem =>{
elem.addEventListener('click', function(e){
//don't do the default link behaviour
e.preventDefault();
const id = this.dataset.id;
console.log('Entry with ID :' + id);
//use your jquery here
});
})
});
<a class="btn btn-light delete-record" href="" data-id="5c215f547d42" title="Delete">link1</a>
<a class="btn btn-light delete-record" href="" data-id="eeee5c1125f547d42" title="Delete">link2</a>
<a class="btn btn-light delete-record" href="" data-id="cccc5c25f431547d42" title="Delete">link3</a>
<a class="btn btn-light delete-record" href="" data-id="bbbbb5c2345f547d42" title="Delete">link4</a>
<a class="btn btn-light delete-record" href="" data-id="111115c25f547d42" title="Delete">link5</a>
Personally i had some problems with data attributes and jQuery so i try to avoid using jquery for that. So you can use this and use the ajax call with the id on the variable.
Have a look on my example, it should cover your problem:
$(document).ready(function(){
// assuming you're adding/removing .delete-record elements you should bind click on body
$('body').on('click', '.delete-record', function(e){
e.preventDefault(); // prevent default action
var id = $(this).attr('data-id') || false; // i removed $target, you don't need it
if( id !== false ){ // if id exists
if(confirm('Entry with ID ' + id){
//AJAX
}
}else{ console.log('id is invalid', id, typeof id); }
});
});
Use jQuery .data() function:
<a class="btn btn-light delete-record"
href=""
data-id="5c25f547d42"
title="Delete">
Delete
</a>
$(document).ready(function () {
$('.delete-record').on('click', function (e) {
$target = $(e.target);
var id = $target.data('id');
if (confirm('Entry with ID ' + id)) {
// AJAX
}
});
});
I'm trying to give the button a new content if it's clicked. I also add new classes. That work's perfectly fine on the first click but for some reason the innerhtml ins't changing after clicking a second time on it..
HTML:
<button class="btn btn-warning btn-invisible"><i class="fa fa-eye-slash"></i></button>
jQuery:
$('.btn-invisible').click(function() {
$(this).removeClass('btn-invisible');
$(this).addClass('btn-visible');
$(this).html('<i class="fa fa-eye"></i>');
});
$('.btn-visible').click(function() {
$(this).removeClass('btn-visible');
$(this).addClass('btn-invisible');
$(this).html('<i class="fa fa-eye-slash"></i>');
});
I got this fiddle ready: https://jsfiddle.net/dthee9w6/7/
Would love if someone could help.
You should use 'on' instead of 'click', so that you can play with dynamically added elements.
$('body').on('click','.btn-invisible',function() {
$(this).removeClass('btn-invisible');
$(this).addClass('btn-visible');
$(this).html('<i class="fa fa-eye"></i>');
});
$('body').on('click','.btn-visible',function() {
$(this).removeClass('btn-visible');
$(this).addClass('btn-invisible');
$(this).html('<i class="fa fa-eye-slash"></i>');
});
hope it helps.
Wrap your code in $(function(){}) ,which is $(document).ready(function(){
});, apart from this every thing is fine
There is no need to update the html each time on the click , all you need to do is add and remove neccessary classes.
For the first click, you are removing invisible class and what if one clicked next time, it tries to remove invisible class again which is not there, it throws an error here,you should use toggleClass
$(function() {
$('.btn-invisible').click(function() {
$(this).toggleClass('btn-invisible');
if (!$(this).hasClass('btn-visible')) {
$(this).addClass('btn-visible');
$(this).find('.fa').removeClass('fa-eye-slash').addClass('fa-eye');
}
});
$('.btn-visible').click(function() {
$(this).toggleClass('btn-visible');
if (!$(this).hasClass('btn-invisible')) {
$(this).addClass('btn-invisible');
$(this).find('.fa').removeClass('fa-eye').addClass('fa-eye-slash');
}
});
});
Hope it helps
This question already has answers here:
Bootstrap onClick button event
(2 answers)
Closed 6 years ago.
Ok I'm new to bootstrap themes and all, so was trying to fire a javascript onclick method on
the below bootstrap button but couldn't figure out how to do so..
<a class="btn btn-large btn-success" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html#">Send Email</a>
Any help would be appreciated..
Just like any other click event, you can use jQuery to register an element, set an id to the element and listen to events like so:
$('#myButton').on('click', function(event) {
event.preventDefault(); // To prevent following the link (optional)
...
});
You can also use inline javascript in the onclick attribute:
<a ... onclick="myFunc();">..</a>
<a class="btn btn-large btn-success" id="fire" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html#">Send Email</a>
$('#fire').on('click', function (e) {
//your awesome code here
})
You can use 'onclick' attribute like this :
<a ... href="javascript: onclick();" ...>...</a>
Seem no solutions fix the problem:
$(".anima-area").on('click', function (e) {
return false; //return true;
});
$(".anima-area").on('click', function (e) {
e.preventDefault();
});
$(".anima-area").click(function (r) {
e.preventDefault();
});
$(".anima-area").click(function () {
return false; //return true;
});
Bootstrap button always maintain th pressed status and block all .click code.
If i remove .click function button comeback to work good.