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');
});
Related
The first input I can fill in the URL when clicking on an image.
When I add a new input and I click on the image, the URL appears on the button ADD not within the input with focus
https://jsfiddle.net/gislef/wyp4hzrd/
var input = '<label>Nome: <input type="text" name="images[]" /> X</label></br>';
$("input[name='add']").click(function( e ){
$('#inputs_add').append( input );
});
$('#inputs_add').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();
});
var focused = null;
$("input").on("focus", function() {
focused = $(this);
})
$("img").click(function() {
if (focused.length)
focused.val($(this).attr("src"));
})
With fixed inputs I can work properly:
Fill inputs with urls images
please try with delegate, such as below:
var input = '<label>Nome: <input type="text" name="images[]" /> X</label></br>';
$("input[name='add']").click(function( e ){
$('#inputs_add').append( input );
});
$('#inputs_add').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();
});
var focused = null;
$(document).delegate("input", "focus", function() {
focused = this;
console.log(focused);
});
$("img").click(function() {
if ($(focused).length)
$(focused).val($(this).attr("src"));
});
It was not adding the link properly since you are creating dynamic controls
$("input").on("focus", function() {
focused = $(this);
})
The above code was running and binding correctly to the first input inside your fieldset
You need to replace this code with a delegate on the parent fieldset that will contain the child input in order for dynamic controls to be registered.
$("fieldset").delegate("input", "focusin", function() {
focused = $(this);
})
Here is a working fiddle with what I suppose is the intended behavior
https://jsfiddle.net/wyp4hzrd/1/
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}
I have a toggle that was just made for a class I am getting to work. I need to add in hidden HTML based upon the toggle state.. Basically it needs to submit with the form with the state of the button.. Would this be the best way to grab it? I am posting the form also.
Here is what I have.. When I click the button, it adds the example text, but I need it to go away when I click again..
$(document).ready(function () {
$(".visibilitybutton").click(function(){
$(this)
.toggleClass("hide")
.find("span").toggleClass("icon84 icon85")
$('.buttons_secondary').append("<input type='hidden'>");
});
});
$(document).ready(function () {
$('.visibilitybutton').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('span').removeClass('icon84').addClass('icon85');
$('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('span').removeClass('icon85').addClass('icon84');
// OR Remove by id
$('.buttons_secondary').find('#visibility_setting').remove();
});
});
You can remove the html you append by id or class like so:
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
Based off of your previous question, I think you should try this:
$(document).ready(function () {
$('.button').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('.icon85').toggleClass('icon85 icon84');
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('.icon85').toggleClass('icon84 icon85');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
});
});
Basically I'm trying to make a button be able to handle editing of an element. I want it so that when I click on the Edit button, it changes the text to Save Changes and adds a class which will then bind the button to another click event so that when they click Save Changes, it'll alert "Saved!" and change the text back to Edit. It does this perfectly once. If you continue to try to do it, it simply won't add the class or change the text anymore.
Here is a demo on jsfiddle
The code:
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
$that.text('Save Changes');
$that.addClass('js-editing');
if ($that.hasClass('js-editing')) {
$that.off('click').on('click', $that, function() {
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
});
}
});
});
Try this http://jsfiddle.net/bpD8B/4/
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
if($that.text()=='Edit'){
$that.text('Save Changes');
$that.addClass('js-editing');
}
else{
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
}
});
});
You never add back the original handler after calling off(), which removes it.
That being said, it might be easier to have two buttons, with appropriate click handlers, and then use hide() and show() to alternate which one is available. To the end user it should look and act exactly the same, and to you it will be a lot less of a headache to code.
Example: http://jsfiddle.net/VgsLA/
I think in the end, this code is more robust and manageable.
This is just a logic problem. And with $that.off('click').on('click', $that, function() { you are delegating to itself, which is not how you should do it.
Here is a solution using your code:
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
if ($that.hasClass('js-editing')) {
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
} else {
$that.text('Save Changes');
$that.addClass('js-editing');
}
});
});
Demo
I'm trying to add a div to a row of content with the click of a button. My code works for the first row but not for any other row. Please help. This is the function for the button:
$(".addMMbtn").each(function() {
$(this).bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
}
);
});
You can see a fiddle of the problem here: http://jsfiddle.net/z7uuJ/
$(".addMMbtn") will only find the elements present on the page and your code will only attach click event handler on them. Since you are adding the elements dynamically you should either use delegate or on (if you are using jQuery 1.7+) for click event to work on them too. Try this
Using delegate
$('#default').delegate('.addMMbtn', 'click', function() {
$('<div class = "mmCell prep"></div>')
.appendTo($(this).closest(".txtContentRow").find(".txtContent"));
});
Using on
$('#default').on('click', '.addMMbtn', function() {
$('<div class = "mmCell prep"></div>')
.appendTo($(this).closest(".txtContentRow").find(".txtContent"));
});
Demo
Instead of assigning click event directly on the button you need to use on():
$(document).on("click", ".addMMbtn",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
}
);
In this case event handler will be subscribed to all newly added elements.
Code: http://jsfiddle.net/z7uuJ/5/
You don't need to loop through the elements to bind the handler:
$(".addMMbtn").live('click', function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
});