So, I created a delete "button" in a span, but for some reason I can't get the .click() to fire. Any ideas? I'm new to jQuery and am thinking that it's something obvious. I tested in Chrome and Safari with no luck.
CSS:
.delete_button {
cursor:pointer;
color: #fff;
border: 1px solid #FFF;
border-radius: 15px;
background: #AAA;
font-size: 8px;
line-height: 0px;
padding: 0px 2px 0px 2px;
}
HTML/PHP:
<span class="delete_button" id="delete_<? echo $some_id; ?>">X</span>
jQuery:
$(document).ready(function() {
$('.delete_button').click(function() {
var transaction_id = $(this).attr('id').replace('delete_','');
alert("Delete transaction #" + transaction_id);
return false;
});
});
use .on()
As your span is added dynamically so it is not present at the time DOM ready or page load.
So you have to use Event Delegation
Syntax
$( elements ).on( events, selector, data, handler );
like this
$(document).on('click','.delete_button',function(){
// code here
});
or
$('parentElementPresesntAtDOMready').on('click','.delete_button',function(){
// code here
});
your code becomes
$(document).ready(function () {
$(document).on('click', '.delete_button', function () {
var transaction_id = $(this).attr('id').replace('delete_', '');
alert("Delete transaction #" + transaction_id);
return false;
});
});
It seems like the span is dynamically created, you need to use event delegation. Bind it to the closest static parent or document
$(document).on('click','.delete_button',function(){
/*Your code*/
});
There is a simpler solution for old webkit: set cursor to pointer via CSS for the span.
Tested and working on a music web app.
Related
hello I need to do it only in javascript (not in jquery)
How would you do something equivalent in javascript something like this in query?
<body>
<div class="wysiwyg">text......text...</div>
<div class="btn btn-primary verMas">Ver más</div>
<script>
$('.verMas').click(function(e){
e.preventDefault();
$('.wysiwyg').css('height','auto');
$(this).hide();
$('.layerMiddle').hide();
});
</script></body>
Your example suggests that you need to be able to
Select Items from the DOM
Add an on-click event listener
Modify the display state of elements
Looking at how you might achieve these in native JS then I would suggest the following:
document.querySelector()
This provides some similar functionality to JQuery's selectors - at least for this use case.
element.addEventListener('click', function)
This provides equivalent functionality as JQuery's $('').click(function)
element.style
This enables modification of the in-line style of the element so setting the style of display to none can achieve this
Putting these all together:
// use querySelector to get the .verMas element and add on-click event listener
document.querySelector('.verMas').addEventListener('click', e => {
// prevent default event
e.preventDefault()
// use querySelector to get the .wysiwyg element
// set the style.height parameter to auto
document.querySelector('.wysiwyg').style.height = 'auto'
// e.target is the element that this event was fired on
// to hide it, set the style.display parameter to none
e.target.style.display = 'none'
// use querySelector to get the .layerMiddle element
//hide the layerMiddle Element
document.querySelector('.layerMiddle').style.display = 'none'
})
div {
padding: 10px;
}
.btn{
display: inline-block;
padding: 6px 12px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
<div class="wysiwyg">text......text...</div>
<div class="layerMiddle">[Layer Middle]</div>
<div class="btn btn-primary verMas">Ver más</div>
I am hiding a div when user hover over one of the menu element. I am using this code for this purpose
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
});
But i want to display bootom-menu div when user will not be hovering (un-hover) over this specific menu element.
This code is working for me finally. Here is the reference link from where i get idea about this. jquery un-hover
jQuery(function(){
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
}, function(){
// change back
jQuery(".bootom-menu").css("display", "block");
});
});
This code is working perfectly for me.
Simply use CSS if you're targeting a child or next-sibling element
#menu-item-15:hover .bootom-menu{
display: none;
}
Just use toggle:
html
<div id='menu_element'>MENU ELEMENT</div><br><br><br><div id='bottom_menu'>BOTTOM MENU DIV</div>
css
#menu_element, #bottom_menu {
background: steelblue;
padding: 20px;
text-align: center;
color: white;
font-family: arial;
display: inline-block;
cursor: pointer;
}
Jquery
$("#menu_element").hover(function(){
$("#bottom_menu").toggle();
});
Result:
Hover function accepts functions to handle in/out events.
Example:
$('#element').hover(
function(){
/* hover handle */
}, function(){
/* un-hover handle */
}
);
Source: https://api.jquery.com/hover/
I am trying to change content in the div, when user typing in other div. Everything works fine: JSFiddle
But when I insert these divs inside another div (I insert these divs inside HTML-editor that is editable div) - it is not working at all.
How can it block this?
$(document).keyup(function() {
var add_title = $("#add_title").html();
$("#title").html(add_title);
});
* {
box-sizing: border-box;
}
.input {
display: inline-block;
min-width: 400px;
min-height: 40px;
padding: 10px;
border: 1px solid blue;
}
.title {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=title class=title>default</div>
<div id=add_title class=input contenteditable=true></div>
Try this.
$(document).on('keyup','.input',function () {
var add_title = $(this).html();
$( "#title" ).html(add_title);
});
It seems like you are adding dynamic elements to the page and for those elements it is not working. if that is the issue then you have to look into event delegation a bit more. The above code will hopefully fix your issue.
I am loading a JQmodal with an ajax call with some basic input elements like a, input, label and button. I need to add a custom class for the elements on focus after immediately opening the modal
Note: Please use tab key to focus each elements
HTML
<p>HTML Images is a link to a page on this website.</p>
<p>W3C is a link to a website on the World Wide Web.</p>
view
...
<div class="jqmWindow" id="dialog">
</div>
CSS:
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
*.focused
{
outline-width: 2px ;
outline-color: #282828;
outline-style: dotted;
}
Java Script
$(document).ready(function() {
$('#dialog').jqm({ajax: 'https://raw.githubusercontent.com/jothikannan89/jqModal/ed840123588cf99ebe061e749e9774e64387ba7f/examples/ajax_tab.html'});
});
$("a,input,button,select,textarea,.jqmClose").on('focus',
function(event) {
event.preventDefault();
$(this).addClass('focused');
});
$("a,input,button,select,textarea,.jqmClose").on('blur',
function(event) {
event.preventDefault() ;
$(this).removeClass('focused');
});
What I am getting is weird, focus class is adding for the parent page element but doesn't add to the elements loaded through ajax to the Modal but default focus is working
Fiddle example: Fiddle
When you do:
$("a,input,button,select,textarea,.jqmClose").on('focus',
function(event) {
event.preventDefault();
$(this).addClass('focused');
});
your dynamic content is not loaded in the DOM yet (that's why you have the expected behavior on the main page, but not in the modal content). You must wait for the return of your ajax request to attach event handlers.
I don't know how JQM works, but it must give you a promise or a way to pass some callbacks.
EDIT:
From the JQM documentation, there is an onload callback:
onLoad (callback) Called right after ajax content is loaded.
// onLoad : assign Mike Alsup's most excellent ajaxForm plugin to the returned form element(s).
var myLoad = function(hash){ $('form',hash.w).ajaxForm(); };
$('#dialog').jqm({onLoad:myLoad});
Use it to attach your handlers in the onLoad function and it will do the trick.
I am trying to build a simple dropdown plugin for small project of mine. I do not want to use ready plugins, I want to learn by making one on my own.
html:
<div>
<span class="dropdown_triger">press</span>
<div class="content dropdown-closed">
</div>
</div>
css:
span{
display:inline-block;
background: green;
padding: 5px;
}
.content{
position: absolute;
top: 40px;
border: solid 1px black;
width: 200px;
height: 100px;
}
.dropdown-closed { display: none; }
.dropdown-open { display: block; }
and JS:
$(document).ready(function(){
$('body').on('click', '.dropdown_triger', function(e){
var $wrapper = $(this).parent();
var $content = $(this).next();
var $triger = $(this);
if($triger.hasClass('selected')){
$(document).off('mouseup.dropdownDocClick');
console.log('hasClass');
}
$triger.toggleClass('selected');
$content.toggleClass('dropdown-closed dropdown-open');
$(document).on('mouseup.dropdownDocClick',function (e){
console.log('fire');
if (!$wrapper.is(e.target) && $wrapper.has(e.target).length === 0){
if($content.hasClass('dropdown-open')){
$content.toggleClass('dropdown-closed dropdown-open');
$(document).off('mouseup.dropdownDocClick');
}
}
});
});
});
Everything works except for this place:
if($triger.hasClass('selected')){
$(document).off('mouseup.dropdownDocClick');
console.log('hasClass');
}
I expect that mouseup event would not fire anymore but it does. Here is a fiddle, just try it. If I open dropdown, mouseup event is attached to document and keeps firing until I have clicked outside container thus closed dropdown.
But if I close dropdown by clicking again on triger button(span in my example) event is not removed and I can not understand why?