Develop Reference

JS - Unable to bind dynamic element to existing radio button

$(document).ready(function () {
debugger;
$('#IsThisTheQuestion_0').on('click', onChangeIsFire);
$('#IsThisTheQuestion_1').on('click', onChangeIsFire);
onChangeIsFire();
});
function onChangeIsFire()
{
if ( $("#IsThisTheQuestion_0" ).is(":checked") ) { //YES
onChangeIsFireYes()
}
if ( $("#IsThisTheQuestion_1" ).is(":checked") ) { //NO
onChangeIsFireNo()
}
}
function onChangeIsFireYes()
{
showHideFormField ("NextQuestion", false)
//show text
$('#IsThisTheQuestion').append(`<div id="myText" class="inLineText" style="margin-top: 20px; font-weight: bold;"> <span>{{ snippets["MyFirstText"] }}</span></div>`);
$("#NextQuestion").on('click',onChangeNextQuestion);
onChangeNextQuestion();
}
function onChangeIsFireNo()
{
showHideFormField ("NextQuestion", true)
$("#NextQuestion").on('click',onChangeNextQuestion);
onChangeNextQuestion();
// show/hide message
$("#IsThisTheQuestion_1").on("click", "#myText", function (){
debugger;
$(this).remove();
});
}
Hi
I have a powerportal website so the code inside double curly braces is liquid code, which basically contains the text.
A div '#myText' is dynamically created when radio button: IsThisTheQuestion is set to Yes (#IsThisTheQuestion_0).
The dynamic div should be removed when radio button: IsThisTheQuestion is set to No (#IsThisTheQuestion_1)
since '#myText' is a dynamic element, I am trying to bind it to the 'No' radio button. But the code below doesnt work... The element is not being removed
$("#IsThisTheQuestion_1").on("click", "#myText", function (){
debugger;
$(this).remove();
});
As the element has a class, I have been able remove "#myText" using either of the statments below
But this time understandably they are only removed when I click on the text itself.
How can I remove the div/text when I click No?
Any suggestions?
Thanks
$(document).on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$('body').on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$(document).on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$('body').on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});

Logic for showing elements and hiding them on body click

I have some piece of code.
This code on button click open menu.
When i click on button again, menu is hidden (i remove .show class, show class has display:block rule, so i toggle visibility of this item by clicking on button).
In next line, i have event, which check what element is clicked. If i "click" outside" of menu, menu become hidden, beacuse i remove .show class.
And now i have a problem, it looks like first part of code dont work anymore (button.on('click')) - i mean, work, but second part of code is also executed, and this logic is now broken.
Have you got any idea for workaround?
Thanks
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
});
$(document).bind( "mouseup touchend", function(e){
var container = menu;
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass('show');
button.removeClass('opened');
}
});

maybe use jQuery toggle() method ? For example:
button.on('click',function() {
menu.toggle();
});

You need to bind an outer click event only when the button click event has been triggered, and remove the outer click event when the outer click event has been triggered:
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
var butbindfunc = function(e){
var container = menu;
container.removeClass('show');
button.removeClass('opened');
$(this).unbind("mouseup touchend", butbindfunc);
};
$(document).not(button).bind( "mouseup touchend", butbindfunc);
});
Note, that I have removed your condition in the document binding callback, and simple excluded it from the select set.

Show a Div first and then Submit on second click of button in a form

I have a form with multiple divs with same names (full-width). They all are on the same level. One of them is hidden (with a class hide). What I want is that if I select Submit, it should not submit, first hide all the brother divs of the hidden div (in this case full-width) and unhide the one with the class hide.
Now when I press again, it should just submit the Form.
JSFiddle is here:- http://jsfiddle.net/xmqvx/2/

Your code had a couple issues:
You used event.preventDefault but passed event in as e - should be e.preventDefault
Your ID selector targeted an ID that didnt exist (changed to #submit-this)
The working code:
$("#submit-this").click(function (e) {
e.preventDefault();
if ($(".full-width").hasClass("hide")) {
$(".full-width").hide();
$(".full-width.hide").removeClass("hide").show();
} else {
alert("Submitting");
$("#this-form").submit();
}
});
http://jsfiddle.net/xmqvx/4/

You could also take advantage of JavaScript's closures like so, to avoid having your behavior be dependent on your UI:
$(document).ready(function () {
var alreadyClicked = false;
$("#submit-this").click(function (e) {
e.preventDefault();
if (alreadyClicked) {
$('#this-form').submit();
} else {
$('.full-width').hide();
$('.hide').show();
alreadyClicked = true;
}
});
});

Javascript - Click Button to FadeIn, FadeOut by clicking anywhere

I want my navigation to fade-in when a special button is clicked, and to fade away when the user is clicking somewhere else - doesn't matter where.
My Script looks like this:
function showText() {
var spoiler = document.getElementById('spoiler');
var button = document.getElementById('navicon');
if (spoiler.style.display == 'block') {
spoiler.style.display='none';
button.value = 'Text einblenden';
} else {
spoiler.style.display='block';
button.value = 'Text ausblenden';
}
return false;
}
My workaround was to give every navigation element the following code snippet.
onclick="$('#thedivlayeriwanttofadeout').fadeOut('slow');"
Can anybody help me?

Use bubbling to attach a single click handler to a common parent element (for example, body).
Here's a simple example:
$(function () {
$("#myButton").click(function (e) {
$("#hidden").fadeIn();
return false;
});
$("#parent").click(function() {
$("#hidden").fadeOut();
});
});
Clicking the button will fade in the element with id hidden. Clicking anywhere in parent will fade it out again.

jQuery text() change on toggle()?

I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.

It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});

You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/