I am adding some checkbox to the page through ajax how to bind the click and change function for these checkboxes
my script is here
$(document).delegate("#filterOptions input[name=inNeedAmountRange]").bind("click change", function () {
var elementValue = $(this).val();
if ($(this).is(':checked')) {
alert('checked : ' + elementValue);
}
} else {
alert('Not checked :' + elementValue);
}
});
Try .on()
Fiddle Demo
$(document).on("click change", "#filterOptions input[name=inNeedAmountRange]", function () {
var elementValue = this.value;
if ($(this).is(':checked')) {
alert('checked : ' + elementValue);
} else {
// ^ remove extra }
alert('Not checked :' + elementValue);
}
});
Event Delegation
Try: http://api.jquery.com/on/
$(document).on("change click", ""#filterOptions input[name=inNeedAmountRange]", function() {
//do something
});
You can replace document with any static container.
Related
I have a problem when i add options dinamically to select elements.
I only register the onChange event after add the options, but the event is fired anyway.
I can i prevent this behaviour?
$.each(this.formDependentGroupData, function (index, data) {
el = $("*[dependent-group='" + data.dependentGroup + "']");
el.off('change',function (e) { //** this one
alert('ofchange');
e.stopImmediatePropagation();
if ($(this).val()) {
obj.resetLists($('#' + obj.tableId + "_editorForm"), $(this));
obj.dependentLists($(this), $(this).val());
} else {
obj.resetLists($('#' + obj.tableId + "_editorForm"), $(this));
}
});
el.append(data.options);
if (data.val){
el.val(data.val);
el.on('change',function (e) { //** this one
alert('change');
e.stopImmediatePropagation();
if ($(this).val()) {
obj.resetLists($('#' + obj.tableId + "_editorForm"), $(this));
obj.dependentLists($(this), $(this).val());
} else {
obj.resetLists($('#' + obj.tableId + "_editorForm"), $(this));
}
});
}
});
this add the options el.append(data.options); and the event is registered later, but it is fired.
Thanks in advance
I am trying to implement an inline edit of Todo lists. I have this code and I want to be able to get the value inside it.
$(function clickedit() {
$(".a").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
var id_val = $(this).attr('value');
//alert(id_val);
updateVal(currentEle, value, id_val);/**/
});
});
function updateVal(currentEle, value, id_val) {
$(currentEle).html('<input class="thVal" id="aaa" type="text" value="' + value + '" />'); // i want to get the value inside the input
var aaa = $('#aaa').val();
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
alert(aaa);
$.post('includes/edit-task3.php', { task_name: aaa, task_id: id_val}, function() {
$(currentEle).html($(".thVal").val().trim());
alert('in');
//current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
How can I get the current value in the input inside .html()?
I tried, var aaa = $('#aaa').val(); but it does not work.. How can I do this?
Thank you so much for your help.
Don't put your events in a function that is triggered by something else
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
var aaa = $(this).val();
alert(aaa);
$.post('includes/edit-task3.php', { task_name: aaa, task_id: id_val}, function() {
$(currentEle).html($(".thVal").val().trim());
alert('in');
//current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
}
});
Use .find(SELECTOR)
$(currentEle).find('#aaa').val();
Edit: As updateVal function could be invoked many times, you will have multiple ID having same value in the DOM. Make sure the ID must be unique
I have a keyup event listener that dynamically creates and adds a new button to the page. Then that button needs another click event listener that depends on data only available inside the keyup listener to do its job.
This is the code I have:
$('.select2-input').on('keyup', function(e) {
var self = $(this);
if (self.prev().text() != 'Uhr') {
return;
}
if ($('.select2-no-results').is(':visible')) {
if (!$('#insertWatch').length) {
$($('Uhr Einfügen')).insertAfter(this);
}
} else {
$('#insertWatch').remove();
}
$(document).on('click', '#insertWatch', function(e) {
alert('Added')
$.post('/insert/watch', { name: self.val() }, function(response) {
$('#supplier_id').prepend($('<option value="' + response + '" selected>' + self.val() + '</option>'));
$('.select2-drop-mask, .select2-drop-active').css('display', 'none');
});
return false;
});
e.stopPropagation();
});
The click event listener does not fire at all when the added button is clicked. I'm unable to figure out why. So to sum this up, alert('Added') never pops up.
Try attaching the even when the element is created.
Something like:
$('.select2-input').on('keyup', function(e) {
var self = $(this);
if (self.prev().text() != 'Uhr') {
return;
}
if ($('.select2-no-results').is(':visible')) {
if (!$('#insertWatch').length) {
$($('Uhr Einfügen')).insertAfter(this).on('click', '#insertWatch', function(e) {
alert('Added')
$.post('/insert/watch', { name: self.val() }, function(response) {
$('#supplier_id').prepend($('<option value="' + response + '" selected>' + self.val() + '</option>'));
$('.select2-drop-mask, .select2-drop-active').css('display', 'none');
});
return false;
});;
}
} else {
$('#insertWatch').remove();
}
e.stopPropagation();
});
Is this what you are looking for? http://jsfiddle.net/leojavier/cp34ybca/
$('.select2-input').on('keyup', function(e) {
var button = "<button class='myButton'>my button</button>";
if ($(this).val() != 'Uhr' && !$('.myButton').length) {
$('body').append(button);
$('.myButton').on('click', function(){
$('i').html('Clicked!');
});
}else if ($(this).val() === 'Uhr'){
$('.myButton').remove();
$('i').html('');
}
});
I have two buttons in a form and want to check which one was clicked.
Everything works fine with radioButtons:
if($("input[#name='class']:checked").val() == 'A')
On simple submit button everything crash.
Thanks!
$('#submit1, #submit2').click(function () {
if (this.id == 'submit1') {
alert('Submit 1 clicked');
}
else if (this.id == 'submit2') {
alert('Submit 2 clicked');
}
});
You can use this:
$("#id").click(function()
{
$(this).data('clicked', true);
});
Now check it via an if statement:
if($("#id").data('clicked'))
{
// code here
}
For more information you can visit the jQuery website on the .data() function.
jQuery(':button').click(function () {
if (this.id == 'button1') {
alert('Button 1 was clicked');
}
else if (this.id == 'button2') {
alert('Button 2 was clicked');
}
});
EDIT:- This will work for all buttons.
$('input[type="button"]').click(function (e) {
if (e.target) {
alert(e.target.id + ' clicked');
}
});
you should tweak this a little (eg. use a name in stead of an id to alert), but this way you have more generic function.
$('#btn1, #btn2').click(function() {
let clickedButton = $(this).attr('id');
console.log(clickedButton);
});
try something like :
var focusout = false;
$("#Button1").click(function () {
if (focusout == true) {
focusout = false;
return;
}
else {
GetInfo();
}
});
$("#Text1").focusout(function () {
focusout = true;
GetInfo();
});
I am using this code to check if an inputbox is empty or not and it works fine but it only checks check a key is press not when the page loads.
It's does what it should but I also want it to check the status when the page loads.
Here is the current code:
$('#myID').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
Try the following:
$(function() {
var element = $('#myID');
var toggleClasses = function() {
if (element.val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
};
element.on('keyup keydown keypress change paste', function() {
toggleClasses(); // Still toggles the classes on any of the above events
});
toggleClasses(); // and also on document ready
});
The simplest way to do is trigger any of the keyup,keydown etc event on page load. It will then automatically call your specific handler
$(document).ready(function(){
$("#myID").trigger('keyup');
});
try checking the value on a doc ready:
$(function() {
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
EDIT: just as an update to this answer, a nicer approach might be to use toggle class, set up in doc ready then trigger the event to run on page load.
function check() {
var $status = $('#status');
if ($(this).val()) {
$status.toggleClass('required_ok').toggleClass('ok');
} else {
$status.toggleClass('required_ok').toggleClass('not_ok');
}
}
$(function () {
$('#myID').on('keyup keydown keypress change paste', check);
$('#myID').trigger('change');
});
Well then why dont just check the field after the page is loaded?
$(document).ready(function(){
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});