click event on td not working - javascript

I have an HTML table. In the td tag there is a checkbox. If I click on that checkbox then it gets checked or unchecked as usual. But what I want is that If I click anywhere on that specific td then the checkbox will also get checked or unchecked. Its because if there are a lot of rows and checkboxes there then you might find it hard to exactly put your mouse pointer over the checkbox and press a click (checkboxes are small so finding it difficult is normal). So I want it to be easy for my client, if he press a click outside the checkbox but inside the parent td tag then it will also work.
My JQuery code is working very good. Now if I click outside the checkbox then its click event is triggered. But the problem is now If I click exactly on the checkbox then it is not working. I am giving my code below. Here is also a jsfiddle link of my code.
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'><input type='checkbox'/></td>
</tr>
</table>
</div>
My JQuery code:
$('.modal-inner-content').on('click', 'td', function(){
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});
UPDATE
Now the jsfiddle code will work, i forgot to include the library. Now see there, if you click outside the checkbox then its working but if you click exactly on the checkbox then its not working. any help?

Try this:
$('.modal-inner-content td').click(function (event) {
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function (i, value) {
return !value;
});
}
});

You can do it by checking the clicked element is checkbox or not like following.
$('.modal-inner-content').on('click', 'td', function (e) {
if (!$(e.target).is(':checkbox')) {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'>
<input type='checkbox' />
</td>
</tr>
</table>
</div>

in your jsfiddle just add Jquery resource
https://code.jquery.com/jquery-2.2.4.js

$('.modal-inner-content').on('click', 'check', function() {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});

Related

Click of Edit button not changing the html on the page after table filter

I have a button that when clicked should switch my html from 'Add New User' to 'Update User' elements. Currently it works when the table has not been filtered. After I have done any sort of filtering on the table, the Edit button no longer works.
Add New User Div
<div id="addNewUser" class="newUser" style="border: solid black 2px">
//snip
</div>
Update User Div
<div id="update_User" class="updateUser" style="border: solid black 2px">
//snip
</div>
Edit User Button
<td><button id="#user.UserId" class="updateUser" value="#user.NtUserId">Edit</button></td>
Show add/edit jquery
<script type="text/javascript">
$(document).ready(function () {
$('div.updateUser').hide();
$('button.updateUser').click(function () {debugger;
$('div.updateUser').innerHTML
$('div.updateUser').show();
$('div.newUser').hide();
});
})
</script>
Your table filter might be removing and re-adding elements to the DOM hence try to bind your click event to the document instead of the specific element;
$(document).ready(function () {
$('div.updateUser').hide();
$(document).on('click','button.updateUser',function(){ //document does not require quotes
// $('div.updateUser').innerHTML
$('div.updateUser').show();
$('div.newUser').hide();
});
});

check checkbox on click href and on click checkbox

I know there is many topics for check a checkbox by clicking on href, but in every solution i seen, you can't check the checkbox by clicking on the checkbox, because it wrapped by the <a> tag.
There is my html :
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
My Jquery :
$("#cb").click(function(e) {
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
What I need :
I need to be able to check the checkbox by clicking on href AND by clicking on the checkbox.
If this post is duplicate, i'm sorry but i didn't see it, link me the duplicate and i'll remove this.
JSFiddle
Check tag name of target to prevent while clicking on input - https://jsfiddle.net/fwzd08cw/2/
$("#cb").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
});
$("#cb").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
Your code have two events 'click' when you has click on checkbox, the parent trigger the 'click' event of them.
You need use event.stopPropagation() function to negate the propagation of event from children to parent.
$("#cb").click(function(e) {
e.preventDefault();
$('#mode').click(function(e) {
e.stopPropagation();
})
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
Add style on input:
pointer-events: none;
Try this, keep your input tag outside the anchor.
<a href='#' id='cb'> mode </a><input type='checkbox' id='mode'>
Try this without any JS code:
<a href='#' id='cb'><label>mode<input type='checkbox' id='mode'></label></a>
https://jsfiddle.net/fwzd08cw/5/
The 'checking' is twice inverted when clicking on the checkbox,
Add : $("#mode").click(function(e) { e.stopPropagation(); }); to prevent this side effect of being inside the link.
Use $('#cb, #mode') to select both elements
Use $(this).is('a') to check if href was the trigger and then check or uncheck accordingly
In every case do e.stopPropagation() to avoid calling click both times when checkbox is clicked 9one for input and one for href)
$('#cb, #mode').click(function (e) {
if ($(this).is('a')) {
e.preventDefault();
$('#mode').prop('checked', !$('#mode').prop('checked'));
}
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
I don't know why you put checkobx inside the link but if you want a solution you can but the link inside a span like this
mode</span><input type='checkbox' id='mode'>
$("#mohamed").click(function(e) {
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
check this pen http://codepen.io/mohamed_sobhy292/pen/wWPzoo

traverse element inside the div

html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.
Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/
The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});
You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope
Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here

Use jquery accordion with table columns

Can I somehow make jQuery UI Accordion compatible with a html table? I've tried everything to make columns collapsible.
Right know I've done this
$(".col1, .col2").addClass("hidden");
$(".show-hide-col1").css("cursor", "pointer").click(function() {
$(".col2").addClass("hidden");
$(".col1").removeClass("hidden");
});
$(".show-hide-col2").css("cursor", "pointer").click(function() {
$(".col1").addClass("hidden");
$(".col2").removeClass("hidden");
});
but it's just not as smart as jquery accordion.
HTML
<table width="50%" border="1px solid red">
<tr><td class="col1">Col1</td><td class="col2">Col2</td></tr>
</table>
<button class="show-hide-col1">Hide col1</button>
<button class="show-hide-col2">Hide col2</button>
SCRIPT
$(document).ready(function(){
$(".show-hide-col1").click(function() {
$('.col1').toggle();
});
$(".show-hide-col2").click(function() {
$('.col2').toggle();
});
});
Fiddle http://jsfiddle.net/3qbe4coj/3/
Note: If you use hide, it only hide the element. But if you use toggle instead, it can be use to show and hide in single button

Dynamically Added Element Not showing in TD in HTML Table

I have this code :
var closeButton = $("<a class='close'/>")
.button({
icons: {
primary: "ui-icon-close"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.click(function () {
if (invisibleElement != null)
jQuery(invisibleElement).val("");
//removing the close button with placaholder value
jQuery(visibleElement).val("Select");
jQuery(visibleElement).focus();
jQuery(visibleElement).blur();
var parentNode = $(this).parent();
parentNode.find(this).remove();
isCloseButton = false;
});
And I am adding this button conditionally by this:
$(visibleElement).parent().find(".showAll").after(closeButton);
This is not added by default. This is added based on some input.
These things are added within a td
<table border="0" width="100%" cellspacing='0' cellpadding='2'>
<tr>
<td style="vertical-align:middle; text-align:left; width: 45%;">
<input type="text" id="theVisibleElement" value=""/>
</td>
</tr>
But After adding the closeButton, I am not able to see the showAll element. Only the inputBox(visibleElement) and the closeButton is visible. Although, in the source code all three are there i.e visibleElement(the input TextBox), showAll element and closeButton. Strangely the td is enough big but still all three are not shown up. What to do? Any suggestion?
This is the jsfiddle: http://jsfiddle.net/8U6xq/1/
Though it's a bit messy.
This is a CSS problem. Your "close" element is right over your showAll element. See the corrected fiddle here :
http://jsfiddle.net/8U6xq/2/
I have just changed this in the css :
.close {
left: 270px;
}

Categories