I have dom constructed like this . there are added dynamically depending on the count from the database.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete"></span>
</label>
<div>
<input/>
<label>
<span></span>
</label>
</div>
This is my DOM structure
When I click on the inner span element click event not working. When I keep the span out side of the div as an independent element it works fine. Any suggestions why click is not raising in the inner span element
This is my click event
$(document).on('click', '.todo-remove', function () {
alert( 'Delete');
});
The 'span' element doesn't have a .todo-remove class, in this case the event wont be called. Try to add the class to span and add some style like this:
padding: 20px;
display: block;
float: right;
Of course, you'll change this code later.
Just try this javascript. It will work for you.
$("label[for='check1']").click(function(){
alert("deleted");
});
The following code woks for me:
http://jsfiddle.net/Lknca8f1/
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete"></span>
</label>
</div>
.todo-remove{
padding:20px;
background: #f00;
cursor:pointer;
}
$(function(){
$(document).on('click','.todo-remove', function(){
$(this).closest('.todo-task').remove();
});
})
Working code link Codepen
My be you are registered event before DOM ready.
Please register after ready event.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> Click
<span class="todo-remove mdi-action-delete">Span</span>
</label>
</div>
$(document).ready(function(){
$(document).on('click', '.todo-remove', function () {
alert( 'Delete');
});
});
A workaround is to set the z-buffer of the inner span to -1
i.e.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete" style="z-index:-1"></span>
</label>
</div>
Related
How can I link a radio button and a text input filled so when the radio is selected the text in the input text area will also change to lets say... red-bold?
I know the logic is:
When radio-A and input-text-A is checked, add CSS class to input-text-A.
When unchecked remove class. If radio-B is selected change input-text-B, and so on...
But right now the simple script targets all text inputs.
$('input[type=text]').addClass('red');
.red {
color: red;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-inline">
<label class="" for="">
<input class="" type="radio" name="answer-Q1" value="option1"> A. </label>
<input type="text" name="answers" class="" placeholder="" required>
</div>
<br>
<div class="form-inline">
<label class="">
<input class="" type="radio" name="answer-Q2" value="option1"> B. </label>
<input type="text" name="answers" class="" placeholder="" required>
</div>
Give your markup, there's actually no need to add any classes or use javascript, you can do what you want with pure CSS:
input[type="radio"]:checked + input[type="text"] {
color: red;
font-weight: bold;
}
As for how to add the class with jQuery, I tend to write "robust" solutions that are maybe a bit longer, but are not as "brittle" (meaning: if markup changes a bit, the script will still work). The way I would write this - assuming no control over markup - would be using jQuery's closest and find to locate the target text inputs:
// no-conflict-save document ready shorthand
jQuery(function($) {
// bind to the "change" event of all inputs that are radio buttons
jQuery('input[type="radio"]').on('change', function() {
// find the text input
var $text_input = $(this).closest('div').find('input[type="text"]');
// if there isn't one, get out
if ( ! $text_input.length ) {
return;
}
// if the radio button is checked, add the class
if ($(this).is(':checked')) {
$text_input.addClass('red');
} else {
// otherwise, remove the class
$text_input.removeClass('red');
}
});
});
However, if I DID have control over markup, I would add a class to the radio input element, and use that to both make the script more "generically" useful, as well as narrow down the scope of which inputs were being bound (which would allow this same script to work effectively on checkboxes + text inputs as well):
// no-conflict-save document ready shorthand
jQuery(function($) {
// bind to the "change" event of any inputs with the "watch-change" class
jQuery('input.watch-change]').on('change', function() {
// find the text input. Note, this would find multiple text inputs if they existed.
var $text_input = $(this).closest('div').find('input[type="text"]');
// if there isn't a text input to work with, get out
if ( ! $text_input.length ) {
return;
}
// if the radio button is checked, add the class
if ($(this).is(':checked')) {
$text_input.addClass('red');
} else {
// otherwise, remove the class
$text_input.removeClass('red');
}
});
});
And, honestly, with a better understanding of your project scope, it might be possible to write an even more efficient, re-usable snippet of script.
Do this:
$("input[type=radio]").on("change", function(e) {
if (e.currentTarget) {
e.currentTarget.next("input[type=text").addClass("red");
}
});
Here is the working code.
$('input:radio').click(function() {
$('label:has(input:radio:checked)').addClass('rightAnswer');
$('label:has(input:radio:not(:checked))').removeClass('rightAnswer');
});
.container {margin:0 auto; margin-top:50px;}
.rightAnswer {font-weight:bold; color:#2979FF;}
.inputAnswers {width:200px;}
.block {display:block;}
input[type="radio"]:checked + input[type="text"] {
color: #2979FF;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label class="block" for="answer-Q1A">
<input type="radio" class="" name="answer-Q1" value="1"> A.
<input type="text" name="answers" class="inputAnswers" id="answer-Q1A" placeholder="" required></label>
<label class="block" for="answer-Q1A">
<input type="radio" class="" name="answer-Q1" value="1"> B.
<input type="text" name="answers" class="inputAnswers" id="answer-Q1A" placeholder="" required></label>
<label class="block" for="answer-Q1A">
<input type="radio" class="" name="answer-Q1" value="1"> C.
<input type="text" name="answers" class="inputAnswers" id="answer-Q2A" placeholder="" required></label>
</div>
I try to change a text insert in an div box with jquery. Here is the Code:
<div onClick="$(this span).text('My new Text');" class="switch switch-success" style="float: right;">
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>
I want to change this "Yes" to "No". Thanks for help ;)
Use the .find method
See a working fiddle here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onClick="$(this).find('span').text('My new Text');" class="switch switch-success" style="float: right;">
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>
You have two options.
Pass this a second parameter which is context
$('span', this).text('My new Text');
Get this element and that use find to get span in it.
$(this).find('span').text('My new Text');
Please separate structure, style and function - the CSS, HTML and JS should not be in the same space - its always better to separate the code for better code quality.Also you could do a toggle for the states of the checkbox so that there is different text on the "checked" and "not checked" states.
And you can even do that with CSS
$('.switch').click(function(){
$(this).find('span').text('My new Text')
})
.switch{float: right}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="switch switch-success" >
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>
I have this checkbox code
<div class="checkbox-group">
<label class="fc-contain-sm checkbox-status">
<input type="checkbox" class="formjs-checkbox-sm" checked disabled>
<div class="fc-status-sm"></div>
<span class="checkbox-lable-sm">Disabled checkbox</span>
</label>
<label class="fc-contain-sm checkbox-status">
<input type="checkbox" class="formjs-checkbox-sm">
<div class="fc-status-sm"></div>
<span class="checkbox-lable-sm">Normal checkbox</span>
</label>
</div>
And i want to add class disabled to checkbox-lable-sm class if the checkbox is disabled using jquery
css
.checkbox-group .disabled {
cursor: not-allowed;
}
I have tried this code but it is not working
$('.checkbox-group > input:disabled.formjs-checkbox-sm').each(function(){
$(this).find('.checkbox-lable-sm').addBack().addClass("disabled");
});
$('.checkbox-group input:disabled.formjs-checkbox-sm').each(function() {
$(this).parent().find('.checkbox-lable-sm').addClass("disabled");
});
Give it a try to this,
$(".checkbox-group input[type='checkbox']").each(function() {
if ($(this).is(':disabled')) {
$(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
}
});
I am sure this will work.
Here is working jsfiddle
Here is second way,
$(".checkbox-group input[type='checkbox']:disabled").each(function() {
$(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
});
Here is third way,
$(".checkbox-group input[type='checkbox']:disabled").each(function() {
$(this).closest("label").find(".checkbox-lable-sm").addClass("disabled");
});
Currently I am using the below method using JS to generate a block of text in a right column when a check box is clicked ticked in a left column.
This has been working fine, however each time I need to add a check box, I need to add a new class and new formContainer element. With the original 3 I had, wasn't a big deal. But now that I'm up to 10 and growing, getting a bit cumbersome.
What better possibilities exist to generate a div/block of text on a different part of the page as a result of a ticked check box?
Check Box
<input id="chk" data-detail="<br>Right 1" class="chkbox" type="checkbox" value="results" />1
Creating individual class
<div class="formContainer"></div>
Script
<script>
$('.chkbox').on('click',function(){
if($(this).is(':checked'))
{
$('.formContainer').html('<div class="new">'+$(this).data('detail')+'</div>');
}
else
{
$('.formContainer').html('');
}
});
</script>
If you are wanting them in columns you can generate them using bootstrap gridsystem.
<div class="formContainer>
<div class="container">
<div class="row">
<div class="col-m-4"></div>
<div class="col-m-4"></div>
<div class="col-m-4"></div>
</div>
<div class="row">
...
</div>
</div>
</div>
If you are wanting to keep them in the same column you could just use .append()
$('.formContainer').append('<div class="new">'+$(this).data('detail')+'</div>');
These can be used together to generate a fluid system or just the append can be used to keep adding divs to your formContainer
I would suggest appending a form after your checkbox using the Jquery function .after(newElement);
Play with it on codepen
Html:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.formContainer{
height: 50px;
width: 100%;
background-color: gray;
}
</style>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
<label class="checkboxLabel">
<input class="checkboxesThatAppends" type="checkbox" value="results" />
Show me a form
</label>
JQuery:
$(document).ready(function(){
$('.checkboxesThatAppends').click(function(){
var associatedFormId = $(this).attr('data-associated-form-id');
if(associatedFormId){
//if there is a form container associated with this checkbox already
//then let's remove that form.
//and remove the association from the checkbox
$('#'+associatedFormId).remove();
$(this).attr('data-associated-form-id', '');
}else{
//generate an Id for the new form to attach.
var newId = new Date().getTime();
$(this).attr('data-associated-form-id', newId);
$(this).parent().after('<div id="'+newId+'" class="formContainer"></div> ');
}
});
});
You can just use jQuery's append() and remove() methods in combination with wrapping HTML elements to achieve this effect.
JSFiddle: https://jsfiddle.net/xuc4tze0/1/
HTML
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 1" class="chkbox" type="checkbox" value="results" />1
</div>
</div>
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 2" class="chkbox" type="checkbox" value="results" />2
</div>
</div>
<div class="row">
<div class="left">
<input id="chk" data-detail="Right 3" class="chkbox" type="checkbox" value="results" />3
</div>
</div>
CSS
.row {
display: flex;
width: 400px;
}
.left, .right {
flex: 0 0 50%;
}
Javascript / jQuery
$('.chkbox').on('click', function() {
if ($(this).is(':checked'))
// Find the row and add the 'right' column
$(this).closest('.row').append('<div class="right">' + $(this).data('detail') + '</div>');
} else {
// Find the 'right' column and remove it
$(this).closest('.row').find('.right').remove();
}
});
Depending on your need and the content of the divs I got a couple of suggestions :
Modal popups. If you these divs are just notifications then a popup would do (but doubt this is what you need).
List group, use bootstrap's neat class list group to show the needed info in an <ul> element, the JS that comes with these can be neat as well with special animations.
Use tooltips on each checkbox instead of getting a whole div appearing.
Last suggestion which I like least is putting all of your div's in a single container div on the right. Fix its width and height and set overflow attribute so you can scroll up and down the shown divs
I was recently testing the click event (finding a textbox upon click) of a <label> and found something unusual.
In the HTML markup,
If the <input> is inside the <label>, the click event on that
label is firing two times
If the <input> is outside the <label>, the click event is
functioning as expected
To better understand what I'm trying to put forward, please refer to the fiddle at JS Fiddle
I'm baffled because of this and can't figure out the reason behind it. Any takers?
If the <input> is inside the <label>, the click event on that label is firing two times
Because events 'bubble' up through the DOM, from the element recieving the initial event (the event.target, here the <input />) through ancestors. Because the listener is attached to the parent of the <input /> it first fires on the click detected on its descendant, and then again when the click bubbles to itself.
To prevent this, you can use event.stopPropagation() to prevent bubbling.
Because the event, in this case, has already bubbled to the <label> element at the point that the alert()/event-handler is fired, you'll have to explicitly call event.stopPropagation() on the <input /> itself, rather than in the event-handler attached to the <label>:
$(function() {
$('label input').click(function(event) {
event.stopPropagation();
});
$(".v1 li label").click(function() {
var ct = $(this).find("input").val();
alert(ct);
});
$(".v2 li label").click(function() {
var ct = $(this).parent().find("input").val();
alert(ct);
});
});
ul {
padding: 10px;
}
li {
list-style: none;
margin-bottom: 5px;
}
li label {
display: block;
background-color: #f0f0f0;
padding: 5px;
cursor: pointer;
border: 1px solid #ccc;
}
li input {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><i>input</i> inside <i>label</i></h3>
<ul class="v1">
<li>
<label for="l1">
<input type="radio" name="a" value="1" id="l1" />First</label>
</li>
<li>
<label for="l2">
<input type="radio" name="a" value="2" id="l2" />Second</label>
</li>
<li>
<label for="l3">
<input type="radio" name="a" value="3" id="l3" />Third</label>
</li>
</ul>
<hr />
<h3><i>input</i> outside <i>label<i></h3>
<ul class="v2">
<li>
<label for="ll1">Fourth</label>
<input type="radio" name="b" value="4" id="ll1" />
</li>
<li>
<label for="ll2">Fifth</label>
<input type="radio" name="b" value="5" id="ll2" />
</li>
<li>
<label for="ll3">Sixth</label>
<input type="radio" name="b" value="6" id="ll3" />
</li>
</ul>
References:
click().
event.stopPropagation().
In your case, click event is propagating from label to input and then again to label, hence you can find two alerts.
You can use below code when we can check the target element tag name and if it is INPUT then return otherwise process further.
$(".v1 li label").click(function(event){
if(event.target.tagName=='INPUT')
return false;
var ct= $(this).find("input").val();
alert("first "+ct);
});
JSFiddle Demo