We Keep Coding

jQuery mousedown not working in chrome/safari

I'm using this piece of code to wrap a link around a (dynamically) created div, which works good so far in firefox, but not on safari/chrome and ie.
I already know that I should use pointer events, but I'm not sure how to achieve this, since I still need the ".on" event, because of the dynamically created div.
// Create a link around the ID
$(".psv-hud").on('mousedown', '#psv-marker-job1', function() {
$(this).wrap( "<a href='/psv-marker-job1/'></a>" );
});
Any ideas how I could solve this?

You need to specify an element that is already there when the DOM is created. In the parameters, you specify the elements you want to add the mousedown method. By simply assigning $('.enemy'), it will attach the method to those that are already present in the DOM.
$('body').on('mousedown', '.enemy', function(event) {
//attack code
}
Jquery on mousedown not working on dynamically generated elements

If this code don't work, .psv-hub isn't exist when mousedown event bind.
First, check change .psv-hub -> document.
$(".psv-hud").on('mousedown', '#psv-marker-job1', function() {
$(this).wrap( "<a href='/psv-marker-job1/'></a>" );
});
Show me the example page.

removing dynamic javascript tag does not remove attached events

i'm creating an application where a user can make a html layout and attach javascript to it.
Now i'm trying to make it so when they click a button, they go to a preview mode where they can see it in action.. so when they click i add the javascript tag ( with their javascript) in the head of the iframe.. this all works fine!
But the problem is when they leave the preview mode, i remove the javascript tag, however when i have code like this:
$('#button').click(function()
{
alert("ok");
});
it still alerts ok when i click the html button (when not in previewmode!), which shouldn't happen!
It seems that when removing the javascript tag, the listeners aren't removed.. Or am i doing it wrong?
Now my question: is there a way to make it so these added eventlisterens are removed when i remove the script tag?
AND YES: i know you can remove eventhandlers with .off(), but since i already have event handlers attached, these will be removed also, and i don't want this!
So two options i can think off:
- rebuild the whole iframe
- store the eventhandlers that were added by the user and when leaving the preview mode, removing them.
Thanks in advance

Each time you "evaluate" JavaScript, it becomes part of the browser's "image", and whether the source is present on the page no longer matters. You need to manually unbind the event, or replace the html segment to which the event was bound.
To remove events from an html element, you can use:
element.parentNode.innerHTML = element.parentNode.innerHTML
This rebuilds the DOM tree using the same HTML.

you need to unbind event.
You can do it by using jquery unbind() or off()
like this:
$("#button").unbind("click");
or
$("#button").off("click");
Demo: http://jsfiddle.net/a6NJk/664/
jquery Doc: http://api.jquery.com/off/
Another good answer: Best way to remove an event handler in jQuery?

Set the event:
var $button = $('#button');
$button.on("click", function() {
alert("ok");
});
Take off the event:
$button.off("click");
You can take off that specific function too
var $button = $('#button');
var eventFunction = function() {
alert("ok");
});
// Set event up
$button.on("click", eventFunction);
// Take event off
$button.off("click", eventFunction);
If you want to remove all events from an element you can use
$("#yourSelector").off()

Because it's not jQuery in general but also vanilla javascript, it would be too much work to keep track of javascript changes, so rebuilding the iframe would be the best option here.

Click an html element JS

is it possible to make a javascript to "click" a specific element?
on my page I've got a with a specific id, and I want to make a JS script to click the div on certain event. is there any method like:
document.getElementById("idofdiv").click()?

Yes, it is possible to trigger a click event by javascript.
document.getElementById('element').click();
Or with jQuery:
$('#element').click();
Please note that the click event won't work if you are trying to force a click on an anchor tag which opens a page. There are tricks called as "clickjacking" which you can use to force it, but this way you're cheating the user.

you can do:
document.getElementById("idofdiv").onclick = function() {
//your code here
}
or
document.getElementById("idofdiv").onclick = someFunction;
function someFunction() {
//your code here
}
See:: onclick

http://www.w3schools.com/jsref/met_html_click.asp
I guess you answered your own question.

How to make dynamically added content clickable? [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I am adding dynamic content to a php page using jQuery. I don't have a problem adding the content I just can't seem to find a way to make the new content respond to a click event.
For example (I'm using a div here but could be a button or other type).
$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');
Edit:
I am currently using jquery 1.9.1, I was using 1.6.2 but I am checking out magnific-popup which required a newer jquery version.
I didn't post my failed attempts (
$("#newstuff").click(function() {...
$("#newstuff").live('click', function() {...
binding the click event, etc.
because I assumed that I am missing something fundamental that a more seasoned jQuery user would spot without the noise of broken code.

You can attach a click event before inserting the element into the DOM:
$('<div id="newstuff">...</div>').click(function(){
//do something
}).insertAfter('#oldstuff');

can't seem to find a way to make the new content respond to a click event.
You have to do event delegation
$("#oldstuff").on("click", '#newstuff',function(){
alert( $(this).text() );
});

What you need is to attach the event to the parent element.
HTML:
<div id="parent">
<div class="thediv">Hello</div>
</div>
JavaScript:
function addDiv() {
var div = document.createElement('div');
div.className = 'thediv';
document.getElementById('parent').appendChild(div);
}
$('#parent').on('click', '.thediv', function() {
// ...
});
See if this technique works.

It is probably you are binding event before attaching DOM and also in latest version of jquery library live method is deprecated so try to bind click even after attaching DOM or you can use following code...
first add DOM.
$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');
and then bind event.
$('#newstuff').on('click',function(){alert('do your stuff!')});
Or
$('#newstuff').click(function(){alert('do your stuff!')});

Try this
$("#yourElementId").live("click",function(){
alert( $(this).text() );
});
As .click is not working after loading dom or dynamically created element

Hiding divs when clicking outside an image [duplicate]

This question already has answers here:
Detect click outside element?
(2 answers)
Hide div when clicking outside
(3 answers)
Closed 10 years ago.
I have a webpage with several hidden divs. I have them set up so that when an image is clicked, they will display and if the image is clicked again, they hide. The problem is, I need to hide them if they're visible and any part of the page is clicked. I've searched high and low and have found some suggestions but have yet to find one that works. Can anyone help?

$(window).click(function() {
$('img').hide();
});
Very simple example

I usually bind a document.click event to listen for a click outside and then remove it when the window is closed.
// in function after your image shows up.
document.click = hideImage;
// other code to hide image when image is clicked
// in function after your image is hidden.
document.click = null;
If you're using jQuery it's easier because you can namespace your events for safe add and removal.
// in function after your image shows up.
$(document).bind('click.imagehide', hideImage);
// other code to hide image when image is clicked
// in function after your image is hidden.
$(document).unbind('click.imagehide');
This method is safer so you don't interfere with other click events bound to the document.

What you need to do is prevent event bubbling. If you are using jquery you can do:
$(document).on ('click', function () { $('div').hide (); });
$('img').on ('click', function (e) { e.stopPropagation (); });
Remeber to change the selectors to fit your needs.