We Keep Coding

Bind an event on a jquery generated element

My code is like this:
$('.flag-icon-dz').click(function() {
var lang = 'Arab';
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
console.log("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
$("li.ql-item.linkid188546").after("<li class='ql-item linkid18854777 closegoogle'><a href='#' class='btn-primary' target='_self'><i class='icon closegoogle ls-lang-frr' aria-hidden='true'></i></a></li>").fadeIn(500);
$('li.ql-item.linkid188546').fadeOut(500);
return false;
});
$('.closegoogle').click(function() {
$('.skiptranslate').contents().find('.goog-close-link > img').click();
$('li.ql-item.linkid18854777').fadeOut('fast').remove();
$('li.ql-item.linkid188546').fadeIn(500);
});
The first function works great, but the second doesn't. I realize that if I copy/paste the second function in the console after the first one, it works too.
I tried a few solutions (callback / setTimeout / jquery deferred / jquery .when method...) I didn't try promise but I don't think I have to in my context. Maybe I didn't write these solutions good enough.
I finally try to put my event (click) directly the .before() which create my new element like this :
$('.flag-icon-dz').click(function() {
var lang = 'Arab';
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
console.log("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
$("li.ql-item.linkid188546").after("<li class='ql-item linkid18854777 closegoogle'><a href='#' class='btn-primary' target='_self'><i class='icon closegoogle ls-lang-frr' aria-hidden='true'></i></a></li>").fadeIn(500).click(function() {
$('.skiptranslate').contents().find('.goog-close-link > img').click();
$('li.ql-item.linkid18854777').fadeOut('fast').remove();
$('li.ql-item.linkid188546').fadeIn(500);
});
$('li.ql-item.linkid188546').fadeOut(500);
return false;
});
But it doesn't work either.
Thanks for the help.
EDIT :
I finally found a kind of solution for my second click event (which isn't the best solution but i works) :
window.setInterval(function(){$('.closegoogle').on("click",function(){
$('.skiptranslate').contents().find('.goog-close-link > img').click();
$('li.ql-item.linkid18854777').fadeOut('fast').remove();
$('li.ql-item.linkid188546').fadeIn(500);
}); }, 1000);
Thanks.

You need to use a delegated bind as the element does not exist before you try your binding:
$('#parent-element-of-closegoogle').on('click', '.closegoogle', function() {
$('.skiptranslate').contents().find('.goog-close-link > img').click();
$('li.ql-item.linkid18854777').fadeOut('fast').remove();
$('li.ql-item.linkid188546').fadeIn(500);
});
Please note that the #parent-element-of-closegoogle needs to be an element that already exists when you do the binding - this can be $(document) if you hjave no other element to bind to

Conditional fields based on select value in SiteOrigin Page Builder

I'm trying to integrate Page Builder by SiteOrigin into my plugin. I've added some custom fields under the row styles via the siteorigin_panels_row_style_fieldsfilter found here. One of the custom fields is a select. I would like fields to either be hidden or displayed when the select is at a certain value. I've enqueued the Javascript to Page Builder using the siteorigin_panel_enqueue_admin_scriptsaction as per the documentation, and have even added the panelsopen event with some test code:
jQuery( document ).ready(function($) {
$(document).on('panelsopen', function(e) {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
However, this does not seem to be working. Any help or ideas how I could solve this would be greatly appreciated!

After some research I figured this out by using the ajaxComplete() function in jQuery. This is how it works:
$(function() {
$(document).ajaxComplete(function() {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
I hope this helps anyone trying to achieve something similar.

Jquery If/else slide

I would like to make a filter for some blogs. Each blog will get a class with a category. If it matches it will show when a button is clicked. I thought I made some decent code, but it's not working. Can you please look at it and tell me what is wrong?
$('#filter').on('click', '.het-begin', function() {
if ($('.blogpagina').hasClass('het-begin')) {
$('.blogpagina').filter('.het-begin').slideDown();
}
else {
$('.blogpagina').slideUp();
}
});
If you guys want to see it in action you can look at: http://atmos.beer/blog.html. If you want some more information I can provide it.
Thanks in advance!

When you click the filter you could loop through each .blogpagina and check if it has the class het-begin. So it would look like this:
$('#filter').on('click', '.het-begin', function() {
$('.blogpagina').each(function() {
if ($(this).hasClass('het-begin')) {
$(this).slideDown();
} else {
$(this).slideUp();
}
});
});

disable function using jQuery

I'd like to disable a javascript function (dialogs()) using jQuery.
What I thought to do was:
Wrap the function in a span: "<span class = 'auto'>" + dialogs(i,0); + "</span>"
If the checkbox is checked, do: (this if statement is in $(document).ready(function(){)
if ($("#autodialog").is(":checked")) {
$(".auto").remove(); }
But this doesn't seem to be working.
Any thoughts?

Make your dialogs methods to handle a extra parameter isEnabled, a boolean dataType.
function dialogs(i,0,isEnabled) {
if(isEnabled) {
//Todos
}
}
then make it to look like this
if ($("#autodialog").is(":checked")) {
dialogs('i',0,false); //I'm not sure about the values of parameter i
}
So there is no need of using span tag as a wrapper.
Hope you understand.

A little more context would be helpful (do you have a jsfiddle we can see?)
I think you may be confusing the Javascript function and the value returned from the function. Are you trying to remove a string of HTML generated by the dialogs() function, or are you trying to remove the actual dialogs function itself?
If you want to disable the dialogs function:
<script>
function getDialogs(a,b) {
// ...
}
var dialogs = getDialogs; // Make dialogs refer to getDialogs
</script>
Elsewhere you'll have something like:
<script>
if ( $("#autodialog").is(":checked") ) {
dialogs = function __noop__() {};
} else {
dialogs = getDialogs;
}
</script>

you will have to add a click handler to the checkbox
$("#autodialog").click(function(){
if ($(this).is(":checked")) {
dialogs(i,no,false); }
else
dialogs(i,no,true);
});
function dialogs(i,no,flag){
if(!flag)
{event.preventDefault();return flag;}
else{
......//your working code}
}

whats wrong with this jquery

I'm getting syntax error in firebug here is the code :
$('#moderator-attention').live('toogle', function(){
function () {
$(".moderator-tex").show();
},
function () {
$(".moderator-tex").hide();
}
});
I want to create a toogle function, when button is clicked then textarea with class moderator-tex should appear .. and if other button is clicked then should be hidden ..

Here's the solution: http://api.jquery.com/live/#multiple-events
And the syntax error occurs because you have something like this:
function() {
function() {
},
function() {
}
}
And this makes no sense.

Based on your question/comments maybe you ought to try this :
$("input:radio").click(function() {
var value = $this("attr", "value");
if(value == "expected value"){
$(".moderator-tex").show();
}else{
$(".moderator-tex").hide();
}
});
You should set some value for this particular radio button to make this work

Try this:
$('#moderator-attention').live('toogle', function(){
$(".moderator-tex").slideToggle();
}
});
If your textarea is not created on-the-fly, you can even try:
$('#moderator-attention').click(function(){
$(".moderator-tex").slideToggle();
});

$('#moderator-attention').live('toogle', function () {
$('.moderator-text').toggle();
});
Would be how I would do it.
Not quite sure what you're trying to achieve doing it your way...