Selecting a specific input and adding an event to it - javascript

I'm experiencing an frustrating problem.
I want to add an on-click event on an dynamically added input but I've been struggling with that for some time.
To show some code, here is my initial view
<div class="js-item-list"></div>
The user can then dynamically add data, this div is then populated for example like this (with initial divs)
<div class="js-item-list">
<div class="js-service-list-item>
<table>
<tr>
<td>Something</td>
<td><input type="text" class="js-consumption"></td>
</tr>
</table>
</div>
<div class="js-service-list-item>
<table>
<tr>
<td>Something</td>
<td><input type="text" class="js-consumption"></td>
</tr>
</table>
</div>
... and so on ...
</div>
I want to add an on-click event with jQuery to all the inputs so that when the users clicks on the input, all of the content of that specific input box would be selected. But I have no idea how to so all suggestions would be greatly appreciated, thanx :)

You can use delegate method for newly added or future elements
refrence
$('.js-item-list').delegate('input', 'click', function(e) {
//some code here
})
or for newer version >1.7 of jquery you should use .on()
As of jQuery 1.7, .delegate() has been superseded by the .on() method
$('.js-item-list').on('input', 'click', function(e) {
//some code here
})

Use the jQuery's event delegate function may resolve your problem, try this :
$(".js-item-list").on("click" , "input.js-consumption" , function(){
var domInput = this ;
var $input = $(this) ;
var value = $input.val();
// to do
});

You can use Jquery .on function, which work on dynamically added html element.
$(".js-item-list").on( "click", ".js-consumption" ,function() {
alert( $( this ).val() );
});
.js-item-list is the selector class which is not change dynamically only inner element of this will be change.

I'm assuming you have some button that the user clicks to add another "Something". I'm also assuming you have somewhere in your JS code $(".js-service-list-item").onclick(someAction).
That initial JS code only applies to the elements with that class that exist at the time it is run. This means every time they add an element to the list, you need to reapply that onclick method.
So what I would do is move that $(".js-service-list-item").onclick(someAction) code into the onclick function you have for the button that adds these service-list-items. That way each time you create a new element, you'll also register the onclick event with it

Related

unable to find the item that got user input with dynamically created items

Hi there I am encountering the following problem I have 3 div's dynamically loaded by ajax like so:
<div class="item" id="item1"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item2"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item3"> // Dynamically loaded
<input>
<input>
</div>
$(document).on('change', '.item', function() {
});
What I want to achieve is when I make a change on the input of one of the three div's, I wanna know where the input was provided. Because the elements are dynamically loaded I can't use a direct selector but I have to use $(document).on and because I dont make use of the direct selector I can't make use of (this). How do I find out in what item changes have been made?
Thanks in advance!
The first argument of the handler - for instance e - would receive the event if it is declared. Then the e argument is having target property which gives you the HTML element on which the event originated. So this would give you a reference to the changed input:
$(document).on('change', '.item', function(e) {
var targetInput = e.target;
var parent = $(targetInput).closest("div.item");
// Do something ...
});
According to your HTML, each div is having different id, Hence you can get the div Id on change of the input. Please test this piece of code and test.
$("input").on('keyup', function(){
//Get the parent div id,
var changeDivID = $(this).parents('div').attr("id");
alert(changeDivID);
});

Can't figure out why my change(...) event handler isn't working in this scenario

The relevant piece of HTML is like
<tbody id="results">
<tr>
<td>
<input type="checkbox">
c:\users\me\documents\visual studio 2013\Projects\myproj\Assets/someorg-somecategory-somepic.png
</td>
<td>someorg</td>
<td>somecategory</td>
<td>somepic.png</td>
</tr>
</tbody>
My intent is for the a elements next to the input elements to be visible or hidden depending on whether or not the input is checked.
Seems like it should be simple enough:
$('#results input').change(function() {
console.log("ok, this function got called.");
this.siblings('a').toggleClass('hidden');
});
inside a $(function() { ... });
But, that's not working. Nothing is being printed to the console when I test by checking or unchecking the element. Any idea why this might be? Need me to post any more code?
Add an id to the checkbox or class
<input type="checkbox" id="checkbox"/>
And use $(this) not this
$(this).siblings('a').toggleClass('hidden');
Working demo: http://jsfiddle.net/omnzocqq/
update
According to my idea, you forget to put the table wrap to tbody. But if you add your table wrapper element and edit this to $(this), your code works.
So you don't need to add a class or id to your checkbox.
http://jsfiddle.net/omnzocqq/3/
Demo
The issue is because within the handler this is a DOMElement. You need to wrap this in a jQuery object to be able to call jQuery methods on it:
$('#results input').change(function() {
$(this).siblings('a').toggleClass('hidden');
});
Example fiddle

Clicking on image does nothing

I am trying to create a click event for an image using jQuery but I fail every time I try.
First I have a div:
<div id="price-holder"></div>
then I am using jQuery to insert this HTML by using the following:
$("#price-menu li:nth-child(2)").click(function() {
var pregHTML = $("#cakesmash-price").html();
$("#price-holder").html(pregHTML);
});
However, using this HTML doesn't work
<div id="cakesmash-price" style="display:none">
<img id="cake" src="images/order.png" height="32px" onclick="pregbasic(this);">
</div>
I tried to use the attribute onclick for the image and also tried using jQuery's selector with the ID like so
$("#cake").click(function(){
})
but both didn't work.
Can anyone help me?
Thanks
This assumes that the element is actually being added to the page.
I am betting you are adding the click event before you add the element to the page meaning the selector did not find anything so it did not add the event.
Either add the event after you add the element or use event delegation.
$("#price-holder").html(pregHTML);
$("#cake").click(function(){
});
or
$("#price-holder").on("click", "#cake", function () {
});
Your error could be due to your choice of selectors "#price-menu li:nth-child(2)". Try using the JS .children and .eq selectors. Also if your code was added dynamically consider using the .on() event handler rather than the .click().
Just start with the DOM you actually want, without using jQuery to do this:
<div id="price-holder">
<div id="cakesmash-price" style="display:none">
<img id="cake" src="images/order.png" height="32px">
</div>
</div>
Then you can just add you click handler on #cake:
$('#cake').on('click', function (event) {
// your logic goes here
});

jquery moving rows dynamically with .on

I'm attempting to move rows between two tables, but I cannot get it to keep the click event bound to it. I'm confused on the selector part on the .on event I'm not sure what I'm supposed to be targeting with that.
Basically I can get it to move to one table, and back but then it losses the click property. Not sure why.
I've attached a fiddle(http://jsfiddle.net/Yjqkn/216/) to make the problem clearer. The approve button moves it down, and the waitlist button moves it back, but then it loses all event listeners do I need to rebind them with .bind What is the best way to solve this.
I tried : .on("click","button.remove-participant",function() didn't work
Javascript
$( ":button" ).on("click",function(){
if($(this).hasClass('remove-participant')) {
$(this).removeClass('remove-participant').addClass('add-participant');
$(this).html('Approve');
var current_row = $(this).closest('tr').html();
$('.table_2 > tbody:last').append('<tr>'+current_row+'</tr>');
$(this).closest('tr').remove();
$( ".table_2 .add-participant" ).bind( "click", function() {
$(this).removeClass('add-participant').addClass('remove-participant');
var current_row = $(this).closest('tr').html();
$(this).html('Waitlist');
$('.table_1 > tbody:last').append('<tr>'+current_row+'</tr>');
$(this).closest('tr').remove();
});
}
});
HTML
<table class="table_1">
<tr>
<th>Info Header 1</th><th>Info Header 2</th>
</tr>
<tbody>
<tr><td>Don</td>
<td><button class="remove-participant" name="">Remove</button></td>
</tr>
</tbody>
</table>
<table class="table_2">
<tr>
<th>Info Header 1</th><th>Info Header 2</th>
</tr>
<tbody>
<tr></tr>
</tbody>
</table>
You should use:
$(".table_1").on("click", "button.remove_participant", function() {
...
});
The general idea with event delegation is that you bind the handler to some element(s) that are static in the DOM and will contain all the dynamically added elements. Then the selector argument should specify the more specific dynamic elements that you want to delegate to.
It also doesn't look right that you're binding a click handler to .table_2 .add_participant within the button.remove_participant click handler. Every time you remove a participant, it's going to add another click handler to every .add_participant element, so when you click on those elements the handler will run multiple times. You should delegate the handler just once -- the whole point of delegation is that it picks up dynamic changes so you don't need to redo it every time you modify the DOM.
BTW,
.removeClass('class1').addClass('class2');
can be combined into:
toggleClass('class1 class2');
In my opinion your code is not working is because of your logic. You are here doing this: In table 1, you are removing the class.
$(this).removeClass('remove-participant').addClass('add-participant');
When you click on table 2, and do the same thing. But you never go back and add the remove-participant class in table 1. So the click in Table 1 doesnt not work because class is set to 'add-participant' and not changed back.

Issue while removing a dynamically added row from a html table using jquery

I was creating a dynamic table where a new row is added on a button click.
This table contains a column called Delete. Whenever, delete a-link is clicked, the corresponding row is to be deleted. But my jquery is not working.
The snippet that deletes entry from table is:
$(".delRow").click(function()
{
alert("Called");
$(this).parents('tr').first().remove();
}
);
Here is the jsfiddle LINK
Update: Please Note I am successfully able to delete those row which are not added dynamically. Even the alert is not invoked when I click on Delete a-link column of the row added dynamically.
Since the .delRow is not present at the time the page loads you need to use .on to bind the event handler to dynamically created elements.
To use this form of on we first use jQuery to select an existing static parent of the element we would like to bind our event handler. The chosen parent should be as close to the target element as possible to improve performance. We next specify the events that should be handled and the selector for our target element. Finally, the event handler is provided.
/*Remove Text Button*/
$("#sample-table").on("click", ".delRow", function()
{
$(this).parents("tr").remove();
}
);
Working Example http://jsfiddle.net/qRUev/2/
Documentation
Try to use
$('.delRow').live('click', function (){
alert("Called");
});
instead of
$(".delRow").click(function(){
alert("Called");
});
you may need to use
$(document).on('click', ".delRow", function()
{
alert("Called");
$(this).parents('tr').first().remove();
}
);
Demo: Fiddle

Categories