I need some help so I hope you could help me. I have a table which rows are added this way after click on a button.
var row = "<tr><td><input class='check_box' type='checkbox'></input>some text<td></tr>";
$('#pl_table').append(row);
I also have jquery function that adds a class to a row when checkbox is selected. So this class has a .css definition for background color.
$('input:checkbox').on('change', function() {
if(this.checked) {
$(this).closest('tr').addClass('selected');
}
else{
$(this).closest('tr').removeClass('selected');
}
}
The problem is on('change') event is not called for rows added. And it is called for rows that already exist when loading the page.
why does this happend? What is wrong on my code? Thank you for your help.
I have faced the same situation and the steps I followed to solve this are given below,
a. Put $('input:checkbox').on('change' inside a method as shown below,
function BindDynamicEvents()
{
$('input:checkbox').off('change').on('change', function() {
if(this.checked) {
$(this).closest('tr').addClass('selected');
}
else{
$(this).closest('tr').removeClass('selected');
}
}
}
b. Call this method after the $('#pl_table').append(row) as shown below,
$('#pl_table').append(row);
BindDynamicEvents();
This will solve the problem.
Note: please include .off('change') as shown in code to avoid the event being fired multiple times.
If you want to keep the current syntax try this:
$('#pl_table').on('change', 'input:checkbox', function () {
if (this.checked) {
$(this).closest('tr').addClass('selected');
}
else {
$(this).closest('tr').removeClass('selected');
};
This way you don't add event on each input, you only add it on the table and fire it when input is changed. I prefer this for dynamical generated elements.
Try this:
var row = "<tr><td><input class='check_box' type='checkbox' onchange="change(this);"></input>some text<td></tr>";
$('#pl_table').append(row);
function change(element)
{
if(element.checked) {
element.closest('tr').addClass('selected');
}
else{
element.closest('tr').removeClass('selected');
}
}
I'ts much better to use:
$(document).on('change','#elemnt',function(){
//do something here
});
So there's no need to call BindDynamicEvents(); every time a new row is added.
As of jQuery 1.4, .after() supports passing a function that returns the elements to insert.
Refer this link.
Related
I have an asp.net kendo grid and inside i have an element with a class. I want to replace this class with another by clicking on a link that i put on right side.
So i used jquery to do it but it's not seem to be working.. and inside the console of chrome i don't get any error. I've tried to put alert but it's not triggering.
If someone could help here is my jquery
function changetoOK() {
grid.tbody.find("td").onclick(function (index) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('customClassVerif');
$(this).addClass('customClassOK');
}
});
}
also i add to create a fake link with an html helper to put it inside my grid so i have this in the grid :
columns.Template(#<text></text>).ClientTemplate(#Html.EmptyLink("Passer à OK").ToHtmlString());
and this in a class
public static class MyHtmlExtensions
{
public static MvcHtmlString EmptyLink(this HtmlHelper helper, string linkText)
{
var tag = new TagBuilder("a");
tag.MergeAttribute("class", "changeToOK");
tag.MergeAttribute("href", "javascript:void(0);");
tag.SetInnerText(linkText);
return MvcHtmlString.Create(tag.ToString());
}
}
[EDIT]
I think it could be good to know. I've made some change inside my code first and here is some explenation.
I have an element inside the grid with a class and i want that class to change to another when i click my link.
I think the problem is because you try use 'onclick' method that doesn't work in jQuery.
Try use .on('click', function(index) ...
.onclick isn't a jquery method, try .click instead, like so:
function changetoOK() {
grid.tbody.find("td").click(function (index) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('changeToOk');
$(this).addClass('customClassOK');
}
});
}
This will bind the click event to the td elements, although bear in mind all the function you've provided will do is find all a elements and see if any of them has the class changeToOk. The only reason I mention this is because you're giving the click function an index that is then never used.
This will work as expected :
function changetoOK() {
grid.tbody.find("td").on('click', function (event) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('changeToOk');
$(this).addClass('customClassOK');
}
});
}
So for everyone that want to do the same as me, finaly find out how.
All you have to do is this :
$(document).on('click', '.changeToOK', function () {
$(this).parent().parent().find('.verifyCell').removeClass('customClassVerif').addClass('customClassOK');
})
I added a second class to my first element and it works !
Thanks to everyone who tried to help me.
I wanted to create a checklist that would move a slider as the user ticked boxes. I found the following 2 pieces of code:
http://jsfiddle.net/t2nvft7q/
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
});
And then I found this which is more like what I want to do and based on the first one:
http://jsfiddle.net/ezanker/UznQe/
But on the second one if you click one of the boxes, untick it and then tick it again it stops working?
As far as I can tell it's because of that bit of code above. I've commented out things and moving them around to see what runs first, I've tried replacing parts of the second fiddle with the first and as far as I can tell the only difference between the html / css is the second has a value field on the checkboxes but editing this doesn't have any effect.
Could someone point out what I'm missing?
You shouldn't use .attr to set the checked property, use .prop instead. .attr is for setting attribute on the element, and .prop is for settings properties.
Example (JSFiddle):
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').prop('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
You should use .prop, but for the check itself I would just use .hasClass()
Since the code already gives the clicked element the class of checked, there's really no reason to look any deeper than the clicked element which you already have as $(this).
See this working example:
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).hasClass('checked')) { // here use `.hasClass()` for the check
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').prop('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
// .....
});
I've got a table with different columns identified with different classes.
I've also a checkbox binded to every column.
I created a function which is called on the click of any checkbox. In this function I hide/show the column which is linked to this.
It doesn't have any javascript error, and the code is the following:
$(document).ready(function(){
$('ul input').click(function(){
//alert('yooo');
if ($(this).is(':checked')) {
//alert('checked');
$("td."+replaceAll(" ","_",$(this).val())).show();
$("th."+replaceAll(" ","_",$(this).val())).show();
//alert($("td").length);
}
else{
//alert('unselected');
$("td."+replaceAll(" ","_",$(this).val())).hide();
$("th."+replaceAll(" ","_",$(this).val())).hide();
}
});
});
However, after every click, the action has a lag (after many clicks it becomes tooooooo slow, many seconds).
I tried also with .css instead of hide-show, but it doesn't make any change.
I understood that the problem was linked only to checkbox, not on callback or on jquery function. I solved the problem simply by working with radio input, adding a "true" and a "false" radio input for every checkbox that was in the page.
Instead of running the jQuery selector on every click like below:
$("td."+replaceAll(" ","_",$(this).val()))
You could set up some sort of caching like:
var cache = {} //<-- declare this outside your click handler
//add the code below inside your click handler
className = replaceAll(" ","_",$(this).val())
if(!cache[className])
cache[className ] = $("td."+className + ", th."+className); //select all the elements once and store in the cache object
$el = cache[className];
if ($(this).is(':checked'))
$el.show();
else
$el.hide();
After lots of reading posts and fiddling, I thought this was working to attach a doubleclick 'handler' to each row of my jQuery datatable:
$('#myTable').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
someThingToDoWithTextFromFirstCell(ref);
});
Unfortunately, this only seems to work for rows on the first page. I tried doing something like this as a workaround (basically do the same thing when paging):
$('#myTable').on('page', function () {
$('#myTable').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
someThingToDoWithTextFromFirstCell(ref);
});
} );
However, when it fires there are no tr's found so nothing happens. I assume the event is firing before the datatable has new rows?
Does anyone know how I can get this to work?
Here is a JS Fiddle example, Nikola. Thanks for your time. Double click a row and get an alert, click next and double click a row and get no alert.
JS Fiddle example
This is what you can add in for the workaround that doesn't work:
$('#example').on('page', function () {
$('#example').find('tr').dblclick( function(e){
var ref = $(this).find('td:first').text();
alert(ref);
});
} );
You could find answer here.
So, for dynamically created elements you should use:
$(document).on("dblclick", "#myTable tr", function () {
//code here
});
i've got some JS library, thats on click to the html element changes its class. I would like to write function, that would check if class had been changed, and then add image to this element. Can you help me with this?
thanks!
If you're using jQuery try this:
$(document).ready(function() {
// get the class that's set on page load
var current = $('#element').attr('class');
$('#element').click(function(e) {
if ($(this).attr('class') != current) {
// class has been changed, do something
}
});
});
Here is an example at jsFiddle.net.
Disclaimer: Without more details about which elements have onclick event listeners that change which elements` class, I cannot give you real working code for you situation. Instead, I can only give you some logic which I just did.
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").attr('class') == 'b') {
$("#div").append("<p>Hello</p>");
}
});
Or
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").hasClass('b')) {
$("#div").append("<p>Hello</p>");
}
});
What you can proceed with Krystian is that everytine u click on an element, add a class "say classClicked" to it. Then with the the help of hasClass u can find out the class attached to that element. If is satisfies your condition, add image.
Or if the class changes on each click and you know the name of the changed class, just check using
if($(this).hasClass("b")){
do your action
}
Hope this helps.