We Keep Coding

Event not firing on input change for appended elements

In my form, there's a button to add additional elements as needed by the user. For each input field, there's a .change() handler. The issue is that the .change does not fire on appended form elements but still triggers on existing form elements. Any help is appreciated.
$('.element').each(function() {
$mainElement = $(this); // memorize $(this)
$sibling = $mainElement.next('input'); // find a sibling to $this.
$sibling.change(function($mainElement) {
return function() {
$mainElement.text('My textfield changed');
}
}($mainElement));
Jsfiddle demo: http://jsfiddle.net/WCDBr/22

Try the on method:
$(document).on('change', 'input', function() {});
//or
$(document).on('change', '.inputclass', function() {});
It registers the event with the document and it should work even for newly added documents. Your change event registered with existing elements.

Just for the sake of simplicity i copy pasted the code.
On Clicking the "Add" button you not binding the change event again for the newly created element. Do This on Click:
$('#test').click(function(){
$('ul').append('<li><p class="element">Lorem ipsum</p><input/></li>');
$('.element').each(function() {
$mainElement = $(this); // memorize $(this)
$sibling = $mainElement.next('input'); // find a sibling to $this.
$sibling.change(function($mainElement) {
return function() {
$mainElement.text('My textfield changed');
}
}($mainElement));
});
});

Alert toggles every time when the input is changed

I have input and it toggles a function if it's been changed. I also have table that is created dynamically. And each row in table has an addButton. So, the problem is that this alert toggles so many times so I change the input, but I need to toggle it only once. How to deal with it?
$('.inputsearchform').bind('input', function() {
var addButton = $(".fa.fa-plus");
addButton.click(function() {
alert("test");
});
});
I don't need to add click event to this button, but I need to get onclick() event from it. But this code is only working way, that I found. By the way, I need to get this event only if button is clicked, not every time that I change input.
Question How to check onclick event on button, that appears dynmically, when the input changes?
I tried to add onclick event <i class="fa fa-plus" onclick="addButtonF()">
and in js file: function addButtonF(){
alert("test");
}
but I have an error addButtonF is not defined.

A start would be to define click outside of input handler to prevent multiple click handler calls at each click of addButton
So, the problem is that this alert toggles so many times so I change
the input, but I need to toggle it only once.
Not clear from Question which element needs to be toggled once, or which function should only be called once ?
addButton appears only if I write something in input. I need to use
alert only if I click on this button, not every time that I change
input.
Use event delegation to attach event to dynamically created elements having className .fa.fa-plus
$(".inputsearchform").bind("input", function() {
// create dynamic element
$("<table class='fa fa-plus'>")
.html("<tr><td>"
+ $(".fa.fa-plus").length
+ "</td></tr>"
).appendTo("body");
});
$(document).on("click", ".fa.fa-plus", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="inputsearchform">
Substitute className for class which does not set className of element; use latest version of jQuery
$(".inputsearchform").bind("input", function() {
var div = document.getElementById("div");
var table = document.createElement("table");
div.appendChild(table);
var tr = document.createElement("tr");
table.appendChild(tr);
var td = tr.insertCell(0);
td.innerHTML = "test";
td.className = "try"
});
$(document).on("click", ".try", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="inputsearchform">
<div id="div"></div>
jsfiddle https://jsfiddle.net/1x8ja6qe/2/

Access jquery object when binding it using delegates

In my previous post I want it to find specific dom elements. The jquery selector using find provided in the solution was great. But I want to delegate this selector to bind it with "contextmenu" event. But it won't work if you pass jquery object in the delegate. What I do is the following.
var slots;
slots = $(".fc-slats > table tbody tr ").find("td:eq(1)");
$(".fc-agenda-view").on("contextmenu", slots, function (e){
e.preventDefault();
if (paste===true) {
showSlotContextualMenu($(this), e);
}else{
console.log($(this));
}
});
I want $this object to be the slot but I read that I cannot use jquery object in "on" but I need to use a selector. What would be the equivalent selector for this?I want the td that is second child from the desired tr. Is it
.fc-slats > table tbody tr td:eq(1)

The second parameter of on should be a string selector to find the descendant elements of the primary selector. With that in mind, this should work:
$(".fc-agenda-view").on("contextmenu", '.fc-slats > table tbody tr td:eq(1)', function(e) {
// your code...
});

Does this work?
$(document).on("contextmenu", ".fc-slats > table tbody tr > td:first-child", function (e){
// .....
});

What worked was the following.
var selector = ".fc-slats > table tbody tr td:nth-child(2)";
$(".fc-agenda-view").on("contextmenu",selector , function (e){
e.preventDefault();
if (paste===true) {
showSlotContextualMenu($(this), e);
}else{
console.log($(this));
}
});

Separate click event for first three td and last td not working in Dom change

I am having four column in my table. When we click one of the first three td that will do one operation and when we click last td that will do other kind of operation.
I did like this
$('#items_list tr td').not('#items_list tr td:last-child').click(function() {
// Do something
}
$("#items_list tr td:last-child").click(function() {
// Do something
}
But those not working when Dom change. I try to use .live(), but the disadvantage of li is
Chaining methods is not supported. Any one can guide me?

There is no need to add events to every cell on the table. One event handler at the table tbody level can handle it.
jQuery("#foo tbody").on("click", function (evt) {
var elem = jQuery( evt.srcElement || evt.target );
if (elem.is("td:last-child")) {
alert("last child");
} else {
alert("not last child");
}
});
You might have to add code to the elem to look for the closest td if you have elements inside of the td.
if (!elem.is("td")) {
elem = elem.closest("td");
}
jsFiddle

$("#items_list tr td").last().click(function(){ });

jQuery: Selecting an element in inside an already selected element

For example:
$("table tr").click( function(event)
{
//Say, here i want get the data of td element where its class name="special"
});
Is there any way I can select a element while in the click event, a element under the attached element above $("table tr")?

In this specific case, you can do this:
$("table tr").click( function(event)
{
$(this).children('td.special').whatEverYouNeed();
});
Generally speaking, you need to use find():
$("table tr").click( function(event)
{
$(this).find('td.special').whatEverYouNeed();
});

Something like
$(this).find(".special").html();
I think that that works