I need to disable click from each element except some of them like Button, Anchor, input, select, .nav-class and checkbox, the mentioned elements should be clickable. I don't want any other element to be clickable, so I write following jQuery code but it is not working.
CODE:-
$('html').click(function() {
$('a , input , button , select ,.boxy-checkbok-box ').click(function(event){
return true;
});
return false;
});
You could try use .not() filtering (jQuery)
$('a , input , button , select ,.boxy-checkbok-box').not('.your-selectors, .another-one').click(function(event) {
event.preventDefault();
});
try this
html
<p class="love">love</p>
a<br>
<input type="text" value="input"><br>
<button>button</button><br>
<select value="select"></select><br>
<span class="boxy-checkbok-box ">boxy-checkbok-box </span>
script
$(document).on('click', 'a , input , button , select ,.boxy-checkbok-box ', function() {
alert('clicked');
});
love div or other element not declared in the on click event is disabled for clicking
Related
im trying to get the attribute value through jquery
$(document).click(function() {
var elem = $("input[name='phone']");
alert(elem.length);
if(elem.length > 0){
alert(elem.attr('id'));
}
});
here the case is
i have lots of input fields with same name as "phone" in different form. Whenever i click it i can get only the first value. Not the last one. How can i get it through the Jquery.
In my page only document click will work because the form codes are loading from some other site.
Any help is more appreciate
$( "input[name^='phone']" ).last()
will return the last element with name beginning with 'phone'
You can do this, to get the id of the item that is clicked.
$("input[name='phone']").click(function() {
alert($(this).attr('id'));
}
This is attaching the listener to phone inputs and this is the context, which in this case the item that is clicked.
Try this:
$("input[name='phone']").on('focus', function(){
alert($(this).attr('id'));
}
This will listen to clicks on your phone input fields and alert the id attribute for you to see on screen:
JQuery
$("input[name='phone']").click(function() {
alert($(this).attr("id"));
});
HTML example
<input id="a" name="phone">A</input>
<input id="b" name="phone">B</input>
<input id="c" name="phone">C</input>
<input id="d" name="phone">D</input>
Delegate the event with .on(), then you can use this:
$(document).on('click', 'input[name="phone"]', function() {
console.log('element with id: ' + this.id + ' has value: ' + this.value);
});
Jquery timepicker set button click function not working.
I tried to add a class to <div id="ptTimeSelectSetButton">
using $('#ptTimeSelectSetButton a').addClass('timePickClass');
<div id="ptTimeSelectSetButton"> it's a div inside timepicker
I tried to add click functions on using div id and '' tag inside the div.
unfortunately the click function not working. if anybody know the reason please share here.
HERE DEMO
html page
Start Time <input id="sample1" type="text"></input>
End Time <input id="sample2" type="text"></input>
Script
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
});
// click on div
$('#ptTimeSelectSetButton').click(function(e) {
alert('Working with div id');
});
//or click on <a href> tag
$(".timePickClass").click(function(e) {
alert('working with a tag class');
});
You have to put the click events inside the $(document).ready or use event delegation as others said:
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
//or click on <a href> tag
$(".timePickClass").click(function(e) {
alert('working with a tag class');
});
// click on div
$('#ptTimeSelectSetButton').on('click', function(e) {
alert('Working with div id');
});
});
The div is create dynamically when the popup is shown so you need to use event delegation
$(document).on('click', '#ptTimeSelectSetButton a', function (e) {
alert('Working with div id');
});
Demo: Fiddle
Use event delegation for dynamically created DOM elements
$(document).ready(function(){
$("#sample1").ptTimeSelect();
$("#sample2").ptTimeSelect();
$('#ptTimeSelectSetButton a').addClass('timePickClass');
});
// click on div
$(document).on('click', '#ptTimeSelectSetButton', function(e) {
alert('Working with div id');
});
//or click on <a href> tag
$(document).on('click', ".timePickClass" ,function(e) {
alert('working with a tag class');
});
Fiddle
On a page I have couple of divs, that look like this:
<div class="product-input">
<input type="hidden" class="hidden-input">
<input type="text">
<button class="remove">X</button>
</div>
I'm trying to bind an event to that remove button with this code (simplified):
$('.product-input').each(function() {
product = $(this);
product_field = product.find('.hidden-input');
product.on('click', '.remove', function(event) {
product_field.val(null);
});
});
It works perfectly when there is only one "product-input" div. When there is more of them, all remove buttons remove value from the hidden field from the last product-input div.
https://jsfiddle.net/ryzr40yh/
Can somebody help me finding the bug?
You dont need to iterate over the element for binding the same event. you can rather bind the event to all at once:
$('.product-input').on('click', '.remove', function(event) {
$(this).prevAll('.hidden-input').val("");
});
If the remove buttons are not added dynamically, you will not need event delegation:
$('.remove').click(function(event) {
$(this).prevAll('.hidden-input').val("");
});
Working Demo
You need to declare product and product_field as local variables, now they are global variables. So whichever button is clicked inside the click handler product_field will refer to the last input element.
$('.product-input').each(function() {
var product = $(this);
var product_field = product.find('.hidden-input');
product.on('click', '.remove', function(event) {
product_field.val(null);
});
});
Demo: Fiddle
But you can simplify it without using a loop as below using the siblings relationship between the clicked button and the input field
$('.product-input .remove').click(function () {
$(this).siblings('.hidden-input').val('')
})
Demo: Fiddle
I want that if i click on the image, then the box display in the input field using $('.daterangepicker').show();.
On onclick:
onclick="OpenDatePicker('DateAge')
Markup:
<span class="DateLabelImage" style="cursor: pointer" onclick="OpenDatePicker('DateAge')"><img class="calendarImage" src="../../img/StatImg.png"></span>
<input type="text" id="DateAge" placeholder="Click to open Date Box" class="AgeChangeInput range"/>
Script:
<!-- Call datepicker through image button -->
<script>
function OpenDatePicker(DatePicker)
{
var classIt = '.' + DatePicker;
alert(classIt);
// Click on any Input Field.
$(classIt).on('click', function()
{
alert('Good');
// Show Box on click Date.
$('.daterangepicker').show();
});
}
</script>
I tried using:
.on('click', function()
but this is not working as i am not clicking on the input field instead i am clicking on the image.
http://jsfiddle.net/vikramjakkampudi/9NMgT/1/
function OpenDatePicker(DatPicke)
{
var classIt = '#' + DatPicke;
alert(classIt);
// Click on any Input Field.
$(classIt).on('click', function()
{
alert('Good');
// Show Box on click Date.
// $('.daterangepicker').show();
$('.ui-datepicker-div').show();
});
}
click event should bind in ready or document.ready function .
another thing is 'DateAge' is an id not a class so you should call by '#' not '.'.
I thing following will work.
$(document).ready(function () {
$("#DateAge").click(function () {
alert('Good');
$('.daterangepicker').show();
});
});
I think it should be # instead of a .. Secondly I can't find .daterangepicker in the markup. I did the change as I mentioned. Here is the link
http://jsbin.com/feyunagi/1/edit
Please does anyone know the script that can help me highligh the content of a textfield on the first click
on the second click the selection / highligh should be cleared from the text box leavingg the insertion point.
Thank You in ADvance..
The script selects the text on the first click, but after every consecutive click the textarea will behave like a textarea always does. When the text area loses its focus due to the blur event and you click on it again, the text will be selected again.
Live Demo on JsFiddle
(function () {
var area = document.querySelector('#txt'),
clicked = false;
area.addEventListener('click', function () {
if (!clicked) {
area.select();
clicked = true;
}
});
area.addEventListener('blur', function () {
clicked = false;
});
})()
Because of addEventListener and querySelector the example is not fully cross browser compatible.
Try this: http://jsfiddle.net/4Hkhx/1/
$(document).ready(function(){
$('input').click(function(){
$(this).select();
});
});
function SelectText(sender) {
document.getElementById(sender.id).focus();
document.getElementById(sender.id).select();
}
<input type="text" id="tbTest" value="Test" onclick="SelectText(this)" />