js function - delegate after creating html element not working - javascript

I have this:
<table>
<tr id="firstaut">
<td>Author:</td>
<td>
<input class="auts" name="name" />
</td>
<td>
<button class="aut_button" type="button">delete</button>
</td>
</tr>
<tr>
<td colspan="2">
<a onclick="addmore()"> + add more name</a>
</td>
</tr>
</table>
$(function(){
$('.aut_button').on('click',function(){
alert('test');
});
});
function addmore(){
$("<tr id='firstaut'><td>Author:</td><td><input class='auts' name='name'/></td><td><button class='aut_button' type='button'>delete</button></td></tr>")
.insertAfter('#firstaut').delegate('.aut_button');
}
If i click on newly added delete button, it is not alerting. what am i doing wrong?

Try using on with the other overload,
$(function(){
$('table').on('click', '.aut_button' ,function(){
alert('test');
});
});
Please read here to know more about event delegation.

Related

remove link when checkbox is checked

I have a table with Datatable plugin, and I did the part when the user clicks on the row (tr) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row.
Here is the html:
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
Here is my javascript code for redirecting the user to the link when it's clicked:
$('#sample_1').on( 'click', 'tr', function() {
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
} );
So i don't want to redirect the user when the checkbox is clicked, pls help :)
Thank you
You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox. Then we don't run the rest of the function.
$('table').on( 'click', 'tr', function(e) {
var target = $(e.target);
debugger; // For debugging purposes.
if (target.is('input[type=checkbox]')) {
// Do not continue if it's an input
console.log('no redirect');
return true;
}
console.log('do redirect');
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
</table>
Update:
In this particular case the checkbox had some custom styling, which led to e.target being a span. The solution is to change the condition to $(e.target).is('span'), or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox').
Here you go - Add this to cancel the event when the checkbox is clicked:
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
Here is a working Demo
$('table').on('click', 'tr', function() {
var $a = $(this).find('a').last();
if ($a.length)
alert("fsfsd");
});
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class="">ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class="">22 Candidates</td>
<td class="">01 Apr 2016</td>
<td>
</td>
</tr>
</table>
Use the if construction
if ($('input.checkbox_check').is(':checked')) {
...
}
Add a class named yourradio in your radio button and add this javascript
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox' class="yourradio">
<span></span>
</label>
<script>
$('.yourradio').on('click', function(){
return false;
});

How to capture if a button in a table is clicked

I have a table of buttons
<table>
<tr><input type="button" id="aaa1"></tr>
<tr><input type="button" id="aaa2"></tr>
etc
</table>
I would like capture when button is clicked, so I've written this code:
$('table').on('click', "[id^='aaa']", function(event){
$(this)....
});
I think the problem is that this code is repeated for all the buttons, but I just wanna capture the button that I click. Can anyone help me?
Try:
$("table input[type='button']").on('click', function(event) {
...
});
You code isn't working because you have no table cells inside your table rows.
I think the problem is that this code is repeated for all the buttons
This is not the case, the below example should show this.
I would continue using the deferred method you are currently using because it only adds one listener to the page instead of several for each of the buttons, however I would change it slightly to catch type=button, as shown below:
$('table').on('click', 'input[type="button"]', function(event) {
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="button" id="aaa1" value="B1" />
</td>
</tr>
<tr>
<td>
<input type="button" id="aaa2" value="B2" />
</td>
</tr>
</table>
Try this.
$(document).ready(function(){
$(".buttons").on("click",function(){
var value = $(this).attr("value");
alert(value + " is clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><input type="button" id="aaa1" value="button1" class="buttons"></tr>
<tr><input type="button" id="aaa2" value="button2" class="buttons"></tr>
etc
</table>
You can't directly add element inside tr.Use the td inside tr and add the element inside the tr
$(document).ready(function(){
$("table input[type='button']").click(function() {
alert('Button with id = "'+ this.id +'" is clicked');
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td><input type="button" id="aaa1"></td></tr>
<tr><td><input type="button" id="aaa2"></td></tr>
</table>

Jquery .hide() with html firing only the first time on button click

I have a form in which I'm hiding and showing fields according to the dropdown selection. Initially, when the button is clicked, only the dropdown selection option is shown and the rest of the fields are hidden. Once the form is saved, the user can add another form. So when I click the button for the second time, the .hide()/.show() doesn't work. Instead the entire form is displayed. Here is my code:
$(document).ready(function () {
$("#button").click(function () {
alert("handler called");
$("#name").hide();
$("#selection").on('change', function () {
alert("handler called1");
if ($("#selection").val() == "day") {
$("#name").show();
}
});
});
});
My HTML is:
<div id = "days">
<table>
<tbody>
<tr>
<td>
<div class="selection" id="selection">
<table>
<tbody>
<tr>
<td><label>selection</label></td>
</tr>
<tr>
<td><select class="selection"></select></td>
</tr>
</tbody>
</table>
</div>
<div class="name" id="name">
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td><input type="text"</input></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The
alert("Handler called");
is fired the second time but the .hide() doesnt work.
It truly is hard to understand your end result, but after analyzing what you are doing more, i think this is what you want:
HTML:
<select id="days_dropdown">
<option value='0'>select one</option>
<option value='night'>night</option>
<option value='day'>day</option>
<option value='afternoon'>afternoon</option>
</select>
<form id="myForm" style="display:none">
<label>Name</label>
<input type="text">
<button type="submit">Save</button>
</form>
JS:
$(document).ready(function() {
$("#days_dropdown").change(function() {
if ($(this).val() === "day") {
$("#myForm").show();
} else {
$("#myForm").hide();
}
});
$("#myForm").submit(function() {
//..your code to save the form info
$(this).hide();
$("#days_dropdown").val(0);
return false;
});
});
Let me know if this is the desired result, and ill explain in more detail your mistakes.
On
$("#selection").on('change', function () {
you select your div with id "selection", not the selection tag. And also you should get value of selected option, not the value of "select" tag
Need to modified some in JS code for proper work:
$(document).ready(function () {
$("#button").click(function () {
$("#name").hide();
$("select.selection").on('change', function () {
var sel = this;
if (sel.options[sel.selectedIndex].value == "day") {
$("#name").show();
}
});
});
});
Here is a FIDDLE
Its hard to understand specifically what you are going for, but is this what you are trying to do?
HTML
<button id='btn'>Click Me</button>
<div id="days">
<table>
<tbody>
<tr>
<td>
<div>
<table>
<tbody>
<tr>
<td><label>selection</label></td>
</tr>
<tr>
<td>
<select id="selection">
<option value='something'>1</option>
<option value='day'>2</option>
<option value='something'>3</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="name" id="name">
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td><input type="text"</input></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS:
$(document).ready(function() {
$("#btn").click(function() {
$("#name").hide();
$("#selection").on('change', function() {
if ($("#selection").val() == "day") {
$("#name").show();
}
});
});
});
The problem I initially saw was your .on('change') , you were trying to attach this to a div, but you want to attach it to the select element

Add a sample row to a table dynamically

I have a table as follows:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Remove">Remove</a>
</td>
</tr>
</table>
And I have a hyperlink:
<a class="Clone">Add</a>
What I need to do is to add the <tr class="Sample"> into the table each time I click on the
<a class="Clone">
and remove a row when I click on the <a class="Remove"> corresponding to that row.
I tried as follows :
<script>
$(document).ready(function(){
$('.Clone').click(function(){
$('#shipping').append('.Sample');
});
});
</script>
But on clicking the hyperlink the text ".sample" gets written into the table. How can I do it ?
Try:
$('a.Clone').click(function () {
$('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
$(this).closest('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td> <a class="Remove">Remove</a>
</td>
</tr>
</table> <a class="Clone">Add</a>
The first part clones the input and appends it to the table. The second part handles removing the rows (leaving the top row).
When add button is clicked call this function:
function myAddFunction(){
var html = "<tr class=Sample><td><input type=text></td><td><a class=Remove>Remove</a></td></tr>"
$('#shipping').append(html);
}
When remove button is clicked call this function:
function myRemoveFuncion(){
$(this).closest('tr').remove();
}
Hopre it helps.
I've just wrote a script for you
$( document ).ready(function() {
$(".Remove").on("click", function() {
$(this).parent().parent().remove();
});
$(".Clone").on("click", function() {
var row = $('#shipping tr:last').clone(true);
row.insertAfter('#shipping tr:last');
});
});
try this fiddle
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#shipping').on('click', 'a.Clone', function(e){
e.preventDefault();
$('table#shipping').append( $(this).closest('tr').clone() );
});
$('#shipping').on('click', 'a.Remove', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
</script>
HTML:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Clone" href="#">Clone</a>
<a class="Remove" href="#">Remove</a>
</td>
</tr>
</table>

Output the id of a specific <td>

I need to create a function that outputs only the id of any image whenever the user click on it. (Javascript or jQuery it doesn't matter)
<table>
<tr>
<td id="1"><img src="image1.gif"></td>
<td id="2"><img src="image1.gif"</td>
<td id="3"><img src="image1.gif"</td>
</tr>
</table>
Add a class to your table:
<table class="tblImages">
<tr>
<td id="1"><img src="image1.gif"></td>
<td id="2"><img src="image1.gif"</td>
<td id="3"><img src="image1.gif"</td>
</tr>
</table>
Then delegate the binding:
$('.tblImages').on('click', 'td', function(e){
var id = this.id; // here you go
});
Demo: http://jsfiddle.net/Uz2pW/
try this
$('td').on('click', function(){
alert($(this).attr('id'));
});
LIVE DEMO
If you are looking for printing the data cell id wrapping the image, then one option is to attach an id for each image that would enable you to retrieve its parent node from javascript. It would look like this:
<html>
<head>
<script>
function say_id(some_id) {
alert(document.getElementById(some_id).parentNode.id);
}
</script>
</head>
<body>
<table>
<tr>
<td id="1"><img id="img-1" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
<td id="2"><img id="img-2" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
<td id="3"><img id="img-3" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
</tr>
</table>
</body>
</html>
Try this:
$("td img").on("click", function() {
var id = $(this).closest("td").attr("id");
// do as you want with id
});
None of your images have id's, but you can get the id of the table cell:
$('image').click(function(){
var parentID = $(this).closest('td').id;
console.log(parentID);
});

Categories