I want my tablerows to have the class 'clickable' only if edit mode is turned on. With element inspect I can see that this works. It succesfully removes the 'clickable' class if I turn off edit mode.
If a table row has the class clickable it will click it's checkbox upon clicking the table row. This works too, however when I turn off edit mode, I'm still able to click tablerows and by doing so, also check the checkbox.
If you can see something that I've overlooked please let me know.
function clickableTableRow(isClickable) {
if (isClickable) {
$(tableBody).find('tr').each(function () {
$(this).addClass("clickable");
$(this).click(function () {
$(this).find('input[type=checkbox]').click();
});
})
} else {
$(tableBody).find('tr').each(function () {
$(this).removeClass("checked").removeClass("clickable");
$(this).find('input[type=checkbox]').prop("checked", false);
})
}
}
So to clarify, in element inspect I can see that it does all as it should, so I think the problem lays in the function where I make a checkbox click upon clicking on a tablerow
Use .off()
$(this).off('click');
The off() Method in jQuery is used to remove event handlers attached
with the on() method -or the .click() method. The off() method brings a lot of consistency to
the API and it replace unbind(), die() and undelegate() methods.
The event handler was still active, using .off() turns it off. Adding this line of code tot the else statement solved the issue:
$(this).off('click');
Related
I'm trying to do a simple button rollover, changing it's icon when it's vclicked, but really don't get why the vclick event is only fired once, can someone shed some light on this? I get the same result if I use "click" or attach the event directly to the button element.
JSFiddle at: http://jsfiddle.net/w7quoyn4/
$('#btnAddToCart').on('vclick', function () {
console.log("btnAddToCart vclick event fired");
if ($(this).attr('data-icon', "plus")) {
$(this).attr('data-icon', "minus").button().button("refresh");
} else {
$(this).attr('data-icon', "plus").button().button("refresh");
}
});
Thanks in advance :)
There are two issues in your code.
First, the conditional expression $(this).attr('data-icon', "plus") invokes the setter form of attr(), which will always return the jQuery object its is called on. Since objects are always true in a boolean context, your else branch will never be taken.
To fix that, you could invoke the getter form of attr() and compare the result:
if ($(this).attr("data-icon") == "plus") {
// ...
}
Then again, the calls to button() are the heart of the matter. The appropriate method to use would be buttonMarkup(), but it is deprecated since release 1.4 (and will be removed in 1.5).
The actual solution is to add and remove the appropriate classes yourself, as in:
$(document).on("vclick", "#btnAddToCart", function () {
console.log("btnAddToCart vclick event fired");
$(this).toggleClass("ui-icon-plus ui-icon-minus");
});
You can see the results in this updated fiddle.
I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?
The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE
i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});
Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle
try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.
Unless I am mistaken. jQuery and CSS handle the :checked selector very differently. In CSS when I use :checked, styles are applied appropriately as I click around, but in jQuery it only seems to recognize what was originally in the DOM on page-load. Am I missing something?
Here is my Fiddle
In jQuery:
$('input:checked').click(function () {
$('input:checked').css('background','#FF0000');
$('input:checked+label').css('background','#ff0000');
});
In CSS:
input:checked+label {font-weight:bold;color:#5EAF1E}
UPDATE:
I should clarify that what I am looking to do is trigger behavior if a user clicks an already selected radio button.
Try setting up the handler this way:
$('body').on('click', 'input:checked', function() {
// ...
});
The way you have it, you're finding all the elements that are checked when that code runs. The above uses event bubbling so that the test is made when each "click" happens.
Inside your handler, you're updating the style for all checked elements, even though any particular click will only change one. That's not a huge deal if the number of checkboxes isn't too big.
edit — some further thought, and a helpful followup question, makes me realize that inside an event handler for a radio button "click" event, the button will always be ":checked". The value of the "checked" property is updated by the browser before the event is dispatched. (That'll be reversed if the default action of the event is prevented.)
I think it'll be necessary to add a class or use .data() to keep track of a shadow for the "checked" property. When a button is clicked, you'd see if your own flag is set; if so, that means the button was set before being clicked. If not, you set the flag. You'll also want to clear the flag of all like-named radio buttons.
You bound the event only to the inputs that were initially checked. Remove :checked from the first selector and it works as intended (but ugly.)
http://jsfiddle.net/8rDXd/19/
$('input').click(function () {
$('input:checked').css('background','#FF0000');
$('input:checked+label').css('background','#ff0000');
});
you would of course need to "undo" the css change you made with jQuery to make it go away when the input is unchecked.
$('input').click(function () {
$('input').css('background','').filter(":checked").css('background','#FF0000');
$('input+label').css('background','');
$('input:checked+label').css('background','#ff0000');
});
http://jsfiddle.net/8rDXd/20/
AFTER UPDATE
Keep track of the status of the radio buttons. For example, use .data() to keep an in-memory state of the radio buttons.
$(function () {
var $radio = $(":radio");
$radio.filter(":checked").data("checked", true);
$radio.on("click", function () {
if ($(this).data("checked")) {
alert("Already selected");
}
$radio.data("checked", false).filter(":checked").data("checked", true);
});
});
See it live here.
BEFORE UPDATE
I think you want to use .change() here.
$('input:radio').change(function () {
$('input, input+label').css('background', '');
$('input:checked, input:checked+label').css('background', '#f00');
}).change();
See it live here.
When the document is ready, I'm fetching some datas from the server through post request and I'm filling it in the HTML as tags by append. When you click that tag, a comment textarea will be displayed. When you click in the document section, the textarea will be closed. The problem here is I can't enter the text in the textarea, when I click inside, it is hiding. I tried using event.stopPropagation() but no use.
Here is my jquery code:
$.post("/person/keywords/get/", function(data){
for(i=0; i<data.length; i++)
{
count = count + 1;
$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
}
});
$(".keywords-set").on('click', "[id^=keyword]", function(event) {
event.preventDefault();
i = $(this).attr("id");
i = i.split('-').pop();
$("#comment-"+i).show();
return false;
});
$(".comment").click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
$(".comment").hide();
});
For complete HTML and javascript code, please check here: https://gist.github.com/3024186
It is working in jsfiddle
but not in my localhost. Could you tell the reason, why is it so?
Thanks!
UPDATE
I've also tried this
$(".keywords_set").on('click', ".comment", function(event) {
event.stopPropagation();
});
event.stopPropagation() is not working for HTML elements updated through ajax. But is working for normal(already given) elements.
When doing this:
$(".keywords_set").on('click', ".comment", function(event) {
You must understand that you're catching the event in the element ".keywords_set", and there you will be checking if it bubbled up through ".comment"
This means that any other "click" events set between ".keywords_set" and ".comment" will also activate.
doing stop propagation or returning false will only take affect from the bubbling of ".keywords_set" to the document.
You can do this:
$(document).click(function() {
if($(".comment:hover").length==0){
$(".comment").hide();
}
});
Edit: reply to: "Hey, that code works, I don't know how you are doing it by mentioning .comment.length could you be more descriptive about that?"
When you do any jquery selector, an array is returned. so if you do $(".comment") all html nodes with the class ".comment" will be returned to you in a list [obj1, obj2, ..., objn]
When you do $(".comment:hover") you are asking jquery to select you any element with the class "comment" which also have the mouse currently on top of it. Meaning if the length of the list returned by $(".comment:hover") is bigger than zero, then you caught a bubble from a click in a ".comment".
Although either returning false or stoping propagation should also work. (dunno why in your case it is not working, although i didn't look much at the full code)
Edit 2:
i was lazy to read the full code. but when you are setting the click event for the comment, the comment doesn't exist yet. so the new comment you are adding will not be be caught by your click handler. add it inside the ajax callback and it will work :)
Edit 3: one more thing:
you are not getting side effects because the click even you are re-defining only has the the stop propagation, but you should add the stop propagation before returning false in the
$(".keywords_set").on('click', ".comment", function(event) {
because in practice all other comments you have will be proccessing N times the click event that you are adding to be processed multiple times
Since post method is a asynchronous. You are binding $(".comment") before it exist.
moving
$(".comment").click(function(event) {
event.stopPropagation();
});
after
$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
should work.
I have written two jQuery functions, the simplified version of which run thus:
$('button.class').not('.selected').on('click', function() {
console.log('not selected');
console.log($(this));
$(this).addClass('selected');
}
$('button.class.selected').on('click', function() {
console.log('selected');
console.log($(this));
$(this).removeClass('selected');
}
Clicking on the button always logs the following in the console:
not selected
[<button class="someClass1 someClass2 selected">Text</button>]
The Web Inspector shows this before clicking on the button:
<button class="someClass1 someClass2">Text</button>
and this after clicking on it:
<button class="someClass1 someClass2 selected">Text</button>
Clicking on it again changes nothing.
Switching addClass() to toggleClass() succeeds in toggling 'selected' on and off, but still always logs not selected, which suggests something is going on with my selectors. Why is the first function always being called even when 'selected' is clearly one of the classes associated with the button element?
I noticed in testing some solutions that hard-coding 'selected' as a class of button results in the opposite problem: only second of the functions is ever called, even though toggleClass() works as intended. Do classes added via jQuery not "count" as classes?
The CSS selector is evaluated at the time you run it. I wouldn't expect that there are any elements matching $('button.class.selected') on page load, so your second handler is never executed, because it is never bound to anything.
What you should be doing is attaching event to some base selector such as $('button.class') and then doing filtering when event is fired.
$("button.class").on("click", function()
{
if ($(this).is(".selected"))
{
console.log('selected');
console.log($(this));
$(this).removeClass('selected');
}
else
{
console.log('not selected');
console.log($(this));
$(this).addClass('selected');
}
});
Either version works, but one might be more appropriate than the other, depending on what are you actually trying to do.
If all you are looking to do is to add/remove .selected on button click then this much simpler version will do the job
$("button.class").on("click", function() { $(this).toggleClass("selected"); });
Try changing :
$('button.class').not('.selected')
To:
$('button').not('.selected')
And :
$('button.class.selected')
To:
$('button.selected')