I am trying to accomplish delete in page which is filled with data by ajax call.
my page has this before data is loaded:
<span id="ShowSelectedCategories"></span>
and after ajax call i fill with below info:
function(data){
$('#ShowSelectedCategories').prepend(' x <span style="color:red">' + data +'</span>   ');
}
and finally after click i want to remove clicked element but it doesn't work.
$(function(){
$("#ShowSelectedCategories").click(function(e){
e.target.outerHTML //this is the part i want to remove after click
e.preventDefault();
})
I have tried $(".DeleteCat).click() but this gave error because elements with that class was created dynamically.
Your help is appreciated
Try $(e.target).remove(),
$("#ShowSelectedCategories").click(function(e){
$(e.target).remove();
e.preventDefault();
});
If you want to delete element with class DeleteCat within span with id ShowSelectedCategories then you can do it like this,
$("#ShowSelectedCategories").on("click", "DeleteCat" function(e){
$(this).remove();
e.preventDefault();
});
$('#ShowSelectedCategories').on('click', '.DeleteCat', function(e){
$(this).remove();
e.preventDefault();
});
http://jsfiddle.net/Dj5NQ/
Use something like this to call dynamically added class
$('.class').live("click", function(){
$('#id').remove();
});
Related
https://jsfiddle.net/r7a2r9eL/
$('#insertBtn').click( function(){
$('#mytable > tbody:last-child').append('<tr><td>'+$('#fnameText').val()+'</td><td>'+$('#lnameText').val()+'</td><td>'+$('#pointText').val()+'</td><td><button type="button" class="deleteClass">Delete</button></td></tr>');
$('#textTable input').val('')
});
$(".deleteClass").on("click",function() {
alert('row deleted');
});
Try typing anything into the textboxes. Then click on the insert button.
Then click on the delete button on the first column. Notice the alert didn't trigger even though the button has the intended class
What is wrong with my code?
What you are looking for is event delegation:
Use this:
$(document).on('click','.deleteClass',function()
{
//DELETE CODE HERE.
});
You can use this one instead:
$("#mytable").on("click",'.deleteClass',function() {
alert('row deleted');
});
I've got the following list of semibuttons loaded using javascript:
var html ='<ul class="nav well-tabs well-tabs-inverse mb10" id="users">';
html +='<li class="active"><a id="'+this.my.user+'" data-toggle="tab_'+self.my.id+'" class="pestaña">'+this.my.user+'</a></li>';
var users = this.my.community_users;
for (i=0;i<users.length;i++) {
if (users[i].user != this.my.user)
html +='<li><a id="'+users[i].user+'" data-toggle="tab_'+self.my.id+'" class="pestana">'+users[i].user+'</a></li>';
};
html +='</ul>';
$(html).appendTo("#Dashboard");
Note, that the first item in the list is active. I am getting something like this:
Ok, now i code he onclick event to do something when a button is clicked:
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function(e){
// whatever here
});
What I need now is to set active the tab being clicked and set inactive the tab that was active. How can I access both elements to addclass and removeclass active?
You could use following logic:
$(document).on('click', '#users li:not(.active)', function () {
$('#users').find('li.active').add(this).toggleClass('active');
});
Something like this might work. Basically remove the .active class from everything but the element you clicked on. The add the .active class to the element clicked on.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('a[data-toggle=tab_'+self.my.id+']').not(this).removeClass('active');
$(this).addClass('active');
});
I would remove the 'active' class from all the list items first, then add it back to just the only that was clicked.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('#users .active').removeClass('active');
$(this).addClass('active');
});
I want to remove the headers befor i expor the data into excel, hide doesnt work because the data is still there, so i was using remove. but once removed, after the exporting to excel is completed i wanted to undo the removed headers for display.
<script type="text/javascript">
$("#btnExport").click(function(e) {
alert("");
$head=$('tr.header');
$div=$('#dvData')
$div.remove('tr.header');
alert();
window.open('data:application/vnd.ms-excel,' +encodeURIComponent($div.html()));
e.preventDefault();
});
</script>
i was trying to save the div object in a variable process on that variable div and send it, bt the div sent shows no changes!!
Just make a clone, remove whatever you want, and get the HTML
$("#btnExport").click(function(e) {
e.preventDefault();
var div = $('#dvData'),
clone = div.clone();
clone.find('tr.header').remove();
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( clone.html() ));
});
append saved variable to parent of the deleted div.
Add it before the target element...remove it post that...
$(function() {
$('#add').click(function(){
var div = $('div.toRemove');
var newDiv = $('<div/>').addClass('added').html('hello world');
//newDiv.prependTo(div);
div.before(newDiv);
this.disabled = true;
div.remove();
});
$('#reset').click(function(){
$('div').remove();
$(document.body).append($('<div/>').addClass('toRemove').html('toremove'));
$('#add').removeAttr('disabled');
});
});
Fiddle: http://jsfiddle.net/deostroll/wnu9pv9y/
First of all, You must use var for each variable such as $head and $div
You can use clone to achieve the desired result.
$("#btnExport").click(function(e) {
var $clonedDiv = $('#dvData').clone(true);
$clonedDiv.find("tr.header");
window.open('data:application/vnd.ms-excel,' +encodeURIComponent($clonedDiv.html()));
e.preventDefault();
});
</script>
use clone(true) to retain the events
As per understanding you first want to remove the header before export and then want to add to the table as it is. if i am properly understanding your requirement try the following
$("#btnExport").click(function (e) {
alert("");
$div = $('#dvData')
$divToRemain = $div.find('#TableId thead')
$div.find('#TableId thead').remove();
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($div.html()));
$divToRemain.appendTo('#tblHoliday');
e.preventDefault();
});
Here i save the removed header in the variable and after export i appended it to the table.
Hope this will help.
my js file has
$('#opt_no').click(function() {
$('#sample6').append('<br>Employee Number:').append($("#dynamic").val());
});
$('# opt_yes').click(function() {
$('#sample7').append('<br>Employee Number:' ).append($("#dynamic").val());
});
opt_no and opt_yes are links on my html page.
when user click on submit button, i want to identify on which link he has clicked and pass this link id to onClick function of submit button
Hard to say without the rest of the code. Do you want something like this?
$('#opt_no').click(function() {
$('#sample6').append('<br>Employee Number:').append($("#dynamic").val());
$("#submitlink").attr("href", $(this).attr('id'));
});
Assuming only one link can be clicked, or that the most recent clicked link is the only one you care about, then you can store the id values in a global variable. This can then be accessed from within any other function, such as your submit click event.
var linkId;
$('#opt_no').click(function() {
linkId = $(this).attr('id');
$('#sample6').append('<br>Employee Number:').append($("#dynamic").val());
});
$('# opt_yes').click(function() {
linkId = $(this).attr('id');
$('#sample7').append('<br>Employee Number:' ).append($("#dynamic").val());
});
$('#submitButton').click(function() {
//do something with linkId
});
you ca n get id using this code
$(this).attr('id');
Need to identify each of these 'a' tag in div and bind an onclick event.I have binded the same.I need to append some text below the clicked 'a' tag.But when i tried with my code it binds to all the 'a' tag in the div.How can i specify the 'a' tag which i have clicked.I can make changes to the content in div using jquery.can't modify the content in 'a' tag.
<div class="people_rt_link2">
2011<br><br>
2008<br><br>
</div>
$(document).ready(function() {
var timesClicked = 0;
$('.people_rt_link2 a').bind('click', function() {
jQuery.post("<?php bloginfo('template_directory'); ?>/test.php", data, function(response) {
alert('Got this from the server: ' + response);
//this response should to binded to the clicked a tag
//$(this).after('<div>'+response+'</div>');
});
timesClicked++;
if (timesClicked >= 1) {
$(this).unbind();
}
});
});
Use this to refer to the clicked <a>. Example using jQuery:
$('div.people_rt_link2 a').click(function(){
$(this).unbind('click');
var that = this;
$.post('somepage.php', function(data){
$(that).after(data);
});
return false;
});
Example
Let me know if that's not exactly what you were trying to achieve.
Theres lots of ways to specify the a tag you want to append text too.. first child.. first of type.. but mostly you just append an id to the tag and let javascript handle it..
$("people_rt_link2 a.YourClass").bind("click", function({do stuff}));
http://www.w3schools.com/tags/tag_a.asp
try something like this:
$("people_rt_link2 a").bind("click", foo(<!--Put here all your code you want to be executed -->));