I have a HTML table created with javascript where i have possibility to add new rows (dynamically added elements). In one of the tds i have an input field that fires a bootstrap modal to open. In the modal I have radiobuttons with options and when OK button is clicked the value from the radiobutton is set in the inputfield. The problem is that the value gets updated on every row, not just the row i clicked.
Since the elements are added dynamically i used
$(document).on('click', 'input', function (e) {
doSomething();
});
Any idea how to solve this problem?
Updated with more code
$(document).on('click', 'input', function (e) {
var inputForm = e.target;
modal.modal({show:true});
modal.find(".btn-success").click(function () {
var choice = $("modal").find('input[type=radio]:checked').val();
if (choice) {
modal.modal('hide');
inputForm.value = choice;
}
});
});
Without any furter information about the code you are running it's hard to help you.
But, you might be able to use the target property of the event (e), to look at what element actually triggered the click, to be able to see which row/textbox to update when the modal is closed.
Related
I am working with caph framework and i trying to click in every id focused
$(event.currentTarget).on('selected',function() {
var value = $(this).prop('id');
$('#' + $(this).prop('id')).trigger('click');
});
You can access the event target with $(this) in jQuery. To automatically click on the selected element you could do
$(event.currentTarget).on('select', function() {
$(this).click()
// or $(this).trigger('click')
};
If I understand your question right though you're asking how to click every element with a given ID - please note that you should be using classes for this, as IDs are supposed to be unique. You could achieve that with the following:
$(event.currentTarget).on('select', function() {
$('.yourClassName').click()
};
This will click on every element with the given class.
Is it possible to inject the time into an input field that has just been injected? To clarify I am using CMB2 which is a WordPress library to create Custom Meta Boxes. I am using the repeating field field and this injects a div with a few fields. I want to use a button to add the current time to an input field.
I can do this if the post has been saved and the div is already in the DOM, but I cannot add the time to a newly created row/div.
Is it possible to add the time to a field that has been injected? If so, how? Any help would be appreciated.
I apologize if this does not make any sense. Its 1:40am and I cannot find the words to explain is too well.
This is how I get the time and add it to the input field.
(function($) {
var strDateTime = // bunch of code to get date...
$('.getTime').on('click', function(e) {
var $root = $(this);
e.preventDefault();
$root.parent().find('.note_timestamp').val(strDateTime);
});
}(jQuery));
This works fine if the div block has been saved and not newly injected, but if I click the add row button and the div is injected into the dom the getTime onclick event does not fire.
Because that handler gets added only once when the page first loads. You'd have to attach it to something that is on the page, and then filter it like so:
$('body').on('click', '.getTime', function(e) {
var $root = $(this);
e.preventDefault();
$root.parent().find('.note_timestamp').val(strDateTime);
});
I am using $(this) to get the current selected(clicked) element of a specific class .For the first time its coming fine i.e i am getting the selected element but as soon as i click on second time it is giving the alert of the old as well as new selection .I am not able to find out what is the issue..
Here is the code..
$('.l-one').click(function () {
var tableName = $(this).text();
//Table Name Lable
$("#lbl").text(tableName);
//Panel
$("#Perticulars").show();
$('.my-new-three').click(function () {
var dishvalue = $(this).text(); //get the value of dish item and display in the table
//console.log(dishvalue);
alert(tableName);
alert(dishvalue);
if (localStorage.getItem(tableName) != null) {
alert("b");
In the alert(tableName); i am getting alert of all the tables selected previously .Please help me to resolve this..
Thanks...
use below code . only click assign events to each time when you click '.l-one'. so if you click '.l-one' 3 time 'click' event assign 3 time to '.my-new-three'.
unbind() function remove event from element and bind() function attach event to element. so here as per your code each time when you click '.l-one' unbind remove click event from '.my-new-three' and bind function again assign click event to '.my-new-three'.
$('.my-new-three').unbind('click').bind('click',function () {});
other way is to use separate click event methods.
$('.l-one').on('click', function () { });
$('.my-new-three').on('click',function () {})
Use separate click handler instead of using click handler insider another one. Consider this code:
$('.l-one').click(function () {
//code
}
$('.my-new-three').on("click",function () {
//code
}
Assuming If .my-new-three exists inside .l-one or .my-new-three creating dynamically then use this:
$('.l-one').on("click",".my-new-three",function () {
//code
}
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();
Sorry if this has been asked, I am not sure how to best word it so I couldn't find a result on Google.
I currently have a div #divForm with some text and a table that has a form inside. I currently have it so when you click on the div it toggles to show the table:
$("#divForm").live('click', function () {
$(this).attr('class', 'closeForm');
$(this).find("table.formTable").slideDown();
});
The code that hides the div is as follows:
$(".closeForm").live ('click', function () {
$(this).attr('id', 'divForm');
$(this).find("table.formTable").slideUp();
});
This works. However, because there are inputs in the table/form, which is inside the div, clicking on the inputs to enter information causes the table to hide.
What is the best way to have it so the table/forms hides when clicking anywhere in the div EXCEPT when clicking on an input?
I'm not sure I completely understand your layout, but if .closeForm is the click target you could check the actual event target using .is() and :input like this:
$(".closeForm").live('click', function (e) {
if($(e.target).is(":input")) return;
$(this).attr('id', 'divForm');
$(this).find("table.formTable").slideUp();
});