We Keep Coding

Jquery click in on click handler

I have some strange behaviour with the jquery click event. This was my code:
$("#item").on("click",function(){
//do some stuff
$("#item2").click(); // doesn't work!
});
But the second click is not working when clicking #item. When manually clicking item2 it does work. I got it to work when doing this:
$("#item").on("click",function(){
//do some stuff
document.getElementById("item2").click(); //WORKS!
});
I also tried event.preventDefault() before the jquery click trigger but that doesn't work either.
Can somebody explain why this doesn't work with jquery?

Here is your solution:
$("#item2").trigger('click'); // use trigger function of jQuery

Have you read the documentation of JQuery? in https://api.jquery.com/click/ there explained aout onClick, and you can find why event.preventDefault doesn't work before the JQuery Trigger
For Solution :
$("#item2").trigger('click'); // Use trigger function of jQuery to Trigger
Please Read the Documentation

You cant use click() as a simple method, it must be a function, so you should trigger() the click event:
$("#item").on("click",function(){
//do some stuff
$("#item2").trigger("click");
});

$(function(){
$("#item").on("click",function(){
//do some stuff
$("#item2").trigger('click'); // Now Works !!!
});
$("#item2").on("click",function(){
//do some stuff
alert('working')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="item">item1</button><button id="item2">item1</button>
please see this fiddle.
I have added
$("#item2").trigger('click');
in your code.

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().

after jquery insert - element isnot seen

i have this problem:
i am inserting certain html thru jquery. and in that inserted html i have a class to which i have binded a function. this function isnot beeing called, i have the feeling, the inserted html isnot seen yet by js.
my inserting code.
$(function(){
$('#einf').on('click', function(){
$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
});
});
you can assume, inserting is working well. and this is my binded function:
$(function(){
$('.ame').on('click', function(){
alert('test');
});
});
i tested with already existing element with the same class ame, it is working with that. thanks for help and guidance

You have to run the click bind again on the added element.
Maybe something like this will work:
$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr').find('.ame').on('click', function(){
alert('test');
});

Try with event delegation: http://jsfiddle.net/xehu9/
$('#einf').on('click', '.ame', function(e){ //<-----pass it here.
e.stopPropagation(); //<---------stop the event bubbling here.
alert('test');
});
This happens because you are trying to implement the click on a elem which is not present in the dom when page gets ready.
from the docs:
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

try .live() instead .on()
http://jsfiddle.net/ThobiasN/Pt3db/
$(function(){
$('#einf').on('click', function(){ alert ('some');
$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
});
$('.ame').live('click', function(){
alert('test');
});
});

You cannot reference an element that was dinamically created, because it's not in the DOM when javascript runs, I suggest you use TEMPLATES instead of dinamic html content.
However, if you want to follow this approach, jquery allows concadinating element methods:
$(function(){
$('#einf').on('click', function(){
$('<tr><td><a class="ame">delete</a></td></td></tr>')
.insertAfter('#append_tr')
.on('click',function(){
alert('test');
});
});
});

jQuery append not working from within a plugin

I want to run a an append(and more stuff later on) from within a plugin, but for some reason it doesn't do anything.
the code(basic):
(function($){
function _init(){
$('body').append('<div class="msg"/>');
}
_init()
})(jQuery);

jQuery append can only work after dom ready. The code you have pasted is probably working before dom ready event. Please check below;
http://api.jquery.com/ready/

To put it in code, it should look like:
(function($){
jQuery(document).ready(function(){
$('body').append('<div class="msg"/>');
});
})(jQuery);

Do something AFTER the page has loaded completely

I'm using some embed codes that insert HTML to the page dynamically and since I have to modify that dynamically inserted HTML, I want a jquery function to wait until the page has loaded, I tried delay but it doesnt seem to work.
So for example, the dynamically inserted HTMl has an element div#abc
and I have this jquery:
if ( $('#abc')[0] ) {
alert("yes");
}
the alert doesn't show up.
I'd appreciate any help
Thanks

$(window).load(function () {
....
});
If you have to wait for an iframe (and don't care about the assets, just the DOM) - try this:
$(document).ready(function() {
$('iframe').load(function() {
// do something
});
});

That is the purpose of jQuery's .ready() event:
$(document).ready(function() {
if ( $('#abc').length ) //If checking if the element exists, use .length
alert("yes");
});
Description: Specify a function to execute when the DOM is fully
loaded.

Using the jQuery.ready should be enough. Try this
$(document).ready(function(){
//your code here
});
or
$(function(){
});
which is a shortcut of the first.

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0.
So you have to use -
$(window).on('load', function() {
// code here
});

Try this:
$(document).ready(function () {
if ( $('#abc')[0] ) {
alert("yes");
}
});

$(window).load(function () { ... }
can be enough but otherwise your embeded code (what ever that can be) might provide some callback functionality that you can make use of.
delay() should only be used to delay animations.

Generally, to handle my JQuery before or after page loads, will use:
jQuery(function($){
// use jQuery code here with $ formatting
// executes BEFORE page finishes loading
});
jQuery(document).ready(function($){
// use jQuery code here with $ formatting
// executes AFTER page finishes loading
});

Make sue you bind the event with dom load so it's there when trigger called.
This is how you do it. Hope this helps someone someday
$(window).bind("load", function() {
//enter code here
$("#dropdow-id").trigger('change');
});`