First, sorry for my bad English.
I'm making a Coupons site and have trouble with selecting and deselecting the coupons. Each coupon is in a DIV 'box' in which there is a checkbox.
I made a onClick function on the DIV box (so the user can select the coupon by clicking on anything inside the DIV box. What I need now is, when the user want to deselect the coupon (by clicking on the checkbox inside the DIV box), I need to 'override' the DIV's onClick function (execute the checkbox onClick event, not the DIV's onClick event).
I know that everyone prefers some code as an example, but the question/problem is simple and I don't think you need all of my un'useless code inside the events/functions :)
Thanks :)
It seems like you want stopPropagation if the checkbox is being unchecked: http://jsfiddle.net/8Dcq8/.
$("div").click(function() {
alert("add"); // clicking anywhere in div to add coupon
});
$(":checkbox").click(function(e) {
if(!this.checked) { // if unchecking, remove coupon
alert("remove");
e.stopPropagation(); // don't run parent onclick
}
});
If the <div> click handler looks something like this:
var $boxes = $('div.box');
$boxes.on('click', function ()
{
// do whatever to select the coupon
});
Then the checkbox handler should look something like this:
$boxes.find('input[type="checkbox"]').on('click', function (event)
{
event.stopPropagation();
// do whatever to deselect the coupon
});
See event.stopPropagation().
You have to cancel bubbling. See here for an explanation.
You can use the jQuery Alternative, or create sub-elements with onClicks that don't target your checkbox. you might be able to use something like this also.
document.getElementById('element').checked.onreadystatechange=function(){
//code
}
good luck
Related
I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?
The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.
trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})
I'm trying to add a search button to a client website but it doesn't do anything.
Is my javascript correct or am I doing something wrong?
See in this link: https://fiddle.jshell.net/mdcnzfLw/
Your code doesn't have an event handler for the click event. While CSS makes the icon look clickable, it has no action behind it.
You want to add to your init function:
document.getElementById('icon').addEventListener('click', handleClick);
and then add:
function handleClick() {
alert('You clicked on search');
}
Replace the alert with whatever the code is supposed to do.
document.getElementById('icon').addEventListener('click', handleClick());
You missed the function call in the EventListener.
Hope you are all doing well!
So I have a form that contains list of input text in a row. the form can contains as many rows as possible as there is an 'add row' button that allows user to add dynamically
I use clone() to this 'add row' function and it's working perfectly
Next,each input in a row can only be edited if the corresponding checkbox is checked
I have put the code to the fiddle: FIDDLE DEMO
Now, when the checkbox is checked, we directly put the focus to the first input (which I defined the input class ='first'), once this input is filled, it directly focuses to the next input. and it's working fine, EXCEPT: if I add new row, the focus function doesn't work anymore.
My focus function is:
$("input").keyup(function (event) {
if ($(this).val() != "") {
$(this).next('input').focus();
if ($(this).next('input[type="text"]').val() == "X") {
$(this).closest('.me').find('input').focus();
}
}
});
Is that supposed to be that way? Or is there anything I need to add to the script?
Thanks!!
Use clone(true) instead of clone()
Code
var new_line = $('#content div.2dtme:last').clone(true).append();
DEMO
OR
You need to use Event Delegation. You have to use .on() using delegated-events approach.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.
i.e.
$(document).on('event','selector',callback_function)
Example
$('form').on('keyup', 'input', function (event) {
//Your code
});
instead of
$("input").keyup(function (event) {
//Your code
});
DEMO
This code won't work:
$(document).on('change', '#myRadioButton', function(){ // Won't work
});
I want to catch whenever a radiobutton is deselected or selected, but the code above doesn't catch when it's unselected.
What's the proper way to catch radio button deselection?
I guess, you should use something like that, setting onchange event on all radios from same group:
DEMO jsFiddle
$(document).on('change', ':radio[name=mygrp]', function(){
alert($('#myRadioButton').is(':checked'));
});
Do this:
$('#myRadioButton').change(function(){
alert("changed");
});
$('input[type=radio]').not('#myRadioButton').change(function(){
$('#myRadioButton').change();
});
What it does ?
We know that, a radio button only gets deselected when any other radio button gets selected.
So I basically bind a change event for #myRadioButton and then bind all other radio buttons except #myRadioButton to the change event and on it, i invoke #myRadioButton's change event. like $('#myRadioButton').change();
Here is the JsFiddle
I'm damn sure, that it will work.
Mark it as answer if it helps :)
I'm trying to make my own Wysiwyg redactor.
I have a problem: when I click the control button contenteditable div loses focus and make some actions, which I'd like to make only if was not clicked control-button.
So is there something like this in javascript:
$('#tarea').blur(function(event){
if($(event.reasonelement).is('#bold')) return false;
//Other actions here...
});
Thank you!
One way would be capturing the document's click event and decide what to do with that:
$(document).click(function(event){
elem = $("#tarea");
if (!elem.is(event.target) && elem.has(event.target).length == 0) {
// do your stuff here..
}
});
PS: This should work for all kind of elements and not just textareas.