We Keep Coding

Changing class name and changing event response

I have a button with the class add-to-favorite when clicked the class is changed to remove-from-favorite and a file is added to favorite. When the user clicks on the button again, it has remove-from-favorite The class is changed to add-to-favorite and the file must be removed from the favorite, but this is not the case. The button acts like the remove-from-favorite even if the class is add-to-favorite;. Any ideas?
Here is the code :
<button type="button" class="add-to-favorite" name="button"><i class="material-icons">favorite_border</i></button>
Here is the Javascript code for add-to-favorite
$(".add-to-favorite").on("click", function(event) {
var clicked_button = $(this);
clicked_button.html("<i class='material-icons'>close</i>");
clicked_button.removeClass('add-to-favorite');
clicked_button.addClass('remove-from-favorite');
})
Here is javascript for remove-from-favorite
$(".remove-from-favorite").on("click", function(event) {
var clicked_button = $(this);
clicked_button.html("<i class='material-icons'>favorite_border</i>");
clicked_button.removeClass('remove-from-favorite');
clicked_button.addClass('add-to-favorite');
})

Just use $(document).on() for click event:
$(document).on("click",".add-to-favorite", function(event) {
var clicked_button = $(this);
clicked_button.html("<i class='material-icons'>close</i>");
clicked_button.removeClass('add-to-favorite');
clicked_button.addClass('remove-from-favorite');
});
$(document).on("click",".remove-from-favorite", function(event) {
var clicked_button = $(this);
clicked_button.html("<i class='material-icons'>favorite_border</i>");
clicked_button.removeClass('remove-from-favorite');
clicked_button.addClass('add-to-favorite');
});

Problems with remove checkbox dynamically.

I have looked all over and found many similar threads, but none of them really answered my question with this specific situation:
I want to, when I create a dynamic Checkbox, and want to remove the specific checkbox and the text by clicking on the trash image. It seems to not work when I want to remove.
Live Demo
HTML:
<input type="text" id="checkBoxName" />
<input type="button" value="ok" id="btnSaveCheckBox" />
Jquery:
$(document).ready(function() {
$('#btnSaveCheckBox').click(function() {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
$('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog"}).appendTo(container);
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb :checkbox").remove();
});
$('<br/>').appendTo(container);
}
CSS:
.removeCheckBoxDialog {
margin-left:10%;
cursor:pointer;
}

Try below jQuery:
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove().prev().addBack().remove();
$(this).remove();
});
Fiddle
The above wasnt clearing the label so i edited it a bit :
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove();
$(this).prev().remove();
$(this).remove();
});
Fiddle

Add this
$("#cb"+id).remove();
$('label[for=cb'+id+']').hide();
$(this).nextAll('br').remove();
$(this).remove();
to your click function
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();
$(this).nextAll('br').remove();
$(this).remove();
});
DEMO

Try this
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();

Try this. I have done the following:
Appended a div to contain each of the 3 components
I used var container2 = $("div:last-of-type", container); to select this div.
Finally I simply used $(this).parent().remove(); To get the parent and remove it.
And also I removed the <br> as the div does the job of new line by default.

how to change/edit value of label with jquery/javascript?

i have a standart html label with value:
<label id="telefon" value="101"></label>
i like to edit this value by clicking on the label and enter on the appeared textbox new value (like value="202").
how can i do such a tricky thing?
i tried it with JQuery function, but it really dont wont to work:
$(function() {
$('a.edit').on("click", function(e) {
e.preventDefault();
var dad = $(this).parent().parent();
var lbl = dad.find('label');
lbl.hide();
dad.find('input[type="text"]').val(lbl.text()).show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});

http://jsfiddle.net/jasuC/ , Since you didnt provide the markup, take a look into this working example
$(document).on("click", "label.mytxt", function () {
var txt = $(".mytxt").text();
$(".mytxt").replaceWith("<input class='mytxt'/>");
$(".mytxt").val(txt);
});
$(document).on("blur", "input.mytxt", function () {
var txt = $(this).val();
$(this).replaceWith("<label class='mytxt'></label>");
$(".mytxt").text(txt);
});

You don't need the jquery.
To made almost all tag elements editable set the contentEditable to true.
So, you can change using the default features of a HTML.

// You can add an event listener to your form tag and code the handler which will be common to all your labels (Fiddle HERE)
// HTML
<form id="myform">
<label style="background-color:#eee" title="101">Value is 101<label>
</form>
// JS
$(function(){
$('#myform').on('click',function(e){
var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset();
if($label.is('label')){
if( !$editorInput.length){
$editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label);
}
$editorInput.css('display','inline-block')
.data('editingLabel', $label.get(0))
.focus()
.keydown(function(e){
var $l = $($(this).data('editingLabel')), $t = $(this);
if(e.which == 13){
$l .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,''))
.text('value is now ' + $l.attr('title'));
// UPDATE YOUR DATABASE HERE
$t.off('keydown').css('display','none');
return false;
}
});
}
});
});
// A bit of CSS
#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}

remove input in add new input with jQuery. how is fix it?

how can putting link add after last new input when click on remove no after last input that clicked on remove. how is it?
when you clicked on remove(no last remove) you see that link add append after input. Namely we have tow or several add link after clicked on remove. you in anywhere clicked on remove append link add on input, i want only once append in last new input no in anywhere.
I hope you understand
EXAMPLE: http://jsfiddle.net/zgWr3/12/
$('a.remove_input').live('click', function (event) {
event.preventDefault();
var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
$(this).closest($class).prev().find('.adda .mediumCell').append('')
$(this).closest($class).remove();
});
With respect

For my HTML I would use something like:
<div id="inputs">
<div id="input_container_0">
<input type="text" name="price" placeholder="hello" />
</div>
</div>
<div>
add
</div>
For my JavaScript I would use something like:
var number_of_inputs = 0;
$(function() {
$(".action-add").click(function() {
number_of_inputs++;
$("#inputs").append('<div id="input_container_'+number_of_inputs.toString()+'"><input type="text" name="price" placeholder="hello" /> remove</div>');
});
$(".action-remove").live('click', function() {
$("#input_container_"+$(this).attr("rel")).remove();
});
});
Hope that helps.
EDIT
Updated, so the remove link is not present for the first text box.

Here. Try this:
$(function () {
$('a.add_input').live('click', function (event) {
var $column = $(this).closest('div.add_units');
// clone the top input row
var newDiv = $($column.find('div.mediumCell').get(0)).clone(true);
// clear field values
newDiv.find('input').val(''); // clear the field
// add Remove link to new row
newDiv.append('remove');
$column.find('div.adda').before(newDiv);
event.preventDefault();
return false;
});
$('a.remove_input').live('click', function (event) {
event.preventDefault();
// find row
$row = $(this).closest('.mediumCell').remove();
});
});

How to hide a dom element after creating it on the fly with JQuery?

I am trying to build a form where users can add a text field by clicking on a "add option" button. They can also remove added fields by a "remove option" link created on the fly by Jquery, along with the text field.
JavaScript:
$(document).ready(function(){
$("#add_option").click(function()
{
var form = $("form");
var input_field = '<input type="text" />';
var delete_link = 'remove';
form.append(input_field + delete_link);
return false;
});
$("a").click(function()
{
alert('clicked');
return false;
});
});
When I click on the "add_option" button, a new text field and the "delete_link" appear. But when clicking on the "delete_link" created by JQuery, the browser follows the link instead of launching a pop-up displaying "clicked".
How do I hide a dom element after creating it on the fly with JQuery?

I'd use delegate because its uses less bubbling :
$(document).delegate("a", "click", function(){
alert('clicked');
});
EDIT , here is your code you need to change :
$(document).ready(function(){
$("#add_option").click(function(){
var form = $("form");
var input_field = '<input type="text" />';
input_field.addClass = "dynamic-texfield";
var delete_link = 'remove';
form.append(input_field + delete_link);
return false;
});
Then comes the delegate part :
$(document).delegate(".delete-trigger", "click", function(){
alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});

Try binding the handler for the <a> with "live"
$('a').live('click', function() { alert("clicked); });
You probably should qualify those <a> links with a class or something.

I don't get why you're using a <a> as a button to execute a function in jQuery. You have all the tools you need right in the framework to totally bypass well-worn traditions of HTML.
Just put a css cursor:pointer definition on the button you want to appear "clickable," add some text-decoration if that's your fancy, and then define your function with jQ:
$('.remove-button').live('click', function() {
$(this).parent().remove();
}