We Keep Coding

The second div won't come back after it's clicked twice

I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'

The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.

You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().

How to get JQuery.trigger('click'); to initiate a mouse click

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.

You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);

This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});

See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}

May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})

jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});

Try this that works for me:
$('#bar').mousedown();

Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.

Just use this:
$(function() {
$('#watchButton').trigger('click');
});

You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

jQuery resizable .Live()

When I try to destroy resizable div, hover function on .ui-resizable-se doesn't work. I think I have to use jquery live(). But I couldn't integrate it clearly.
If you hover .ui-resizable-se or .ui-resizable-e when page load, functions will work, but if you hover again, nothing will be happened. How can I overcome this problem?
$('#resizable').resizable({
aspectRatio:false
});
$('.ui-resizable-se').hover(function(){
keep("resizable");
});
$('.ui-resizable-e').hover(function(){
dontKeep("resizable");
});
Source link: http://jsfiddle.net/nNrgP/

The hovers do not work after the first time because you've called resizable("destroy"); Calling that
Removes the resizable functionality completely. This will return the element back to its pre-init state.
Resizable Destroy
If you want that to still be available, you should either toggle between resizable("disable") and resizable("enable"), or completely re-init the resizable div. Without more knowledge of your goal (or other code), it's tough to tell what the best option is.

You could also just update the options:
function dontKeep(val){
$("#"+val).resizable("option", 'aspectRatio', false);
alert("dont keep");
}
function keep(val){
$("#"+val).resizable("option", 'aspectRatio', true);
alert("keep");
}

Try using event delegation since you might be dealing with dynamic eleemnts
$(document).on('mouseenter mouseleave', '.ui-resizable-e', function(){
dontKeep("resizable");
});
$(document).on('mouseenter mouseleave', '.ui-resizable-se', function(){
keep("resizable");
});
Demo: Fiddle

getting a particular div in to view or scroll into view

I am trying to add a feature to my website in a way that when i click a link i want a particular div element to come in to view for a user.. ive tried the code
$(".testClick").live("click",function(e){
e.preventDefault();
// Call the scroll function
goToByScroll("indID13");
});
function goToByScroll(id){
// Reove "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
but this doesnt work... is it possible to achieve this feature with out any plugin by pure jquery itself.. or should i be using any plugin...
I will add a sample of what ive tried. the jsfiddle link http://jsfiddle.net/xFu3M/
and try this one toooo http://jsfiddle.net/xFu3M/6/ is this a bug..im trying to get div 1 in to view and its already in view,, so when i click the link it shows some other div

You just had a syntax error, change the .live to .on as the .live has depreciated in later versions of jQuery use this and it will work:
$(".testClick").on("click",function(e){...
See this edited fiddle jsFiddle

Try
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".wrapper").css({"width" : $(window).width() , "height" : $(window).height()});
$(".testClick").on("click",function(e)
{
e.preventDefault();
goToByScroll("indID13");
});
});
function goToByScroll(id)
{
id = id.replace("link", "");
$('html,body').animate(
{
scrollTop: $("#"+id).offset().top
},'slow');
}
</script>
You click event code was not surrounded in document.ready.
Also use .on instead of .live because it already depreciated from now on.

Call a javascript function from a link. All possible methods

I have a div ~ id is slider I want it to animate/hide when a link is clicked. More precisely I want to toggle it open and close from a link.
jQuery
<script type="text/javascript">
$("#toggleslider").click(function () {
$(this).hide("#slider", { direction: "up" }, 1000);
});
</script>
link
<li><a id="toggleslider" href="javascript:void(0);">toggle</a></li>

You could use .slideToggle
$("#toggleslider").click(function () {
$('#slider').slideToggle(1000);
});
The live demo.

You can use the JQuery toggle() function to toggle it from visible to invisible (and vice-versa). Take a look at: http://api.jquery.com/toggle/
It should be the same syntax, only instead of calling "hide", change it to "toggle".
EDIT: Your syntax might not be totally correct. Try this.
$("#slider").toggle(1000);