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.
Related
I am having trouble targeting elements within jQuery ui-datepicker with the plugin WooCommerce Bookings.
Every time I target it using JavaScript it returns null, so the EventListener can't be executed.
However, if I target anything outside the jQuery ui-datepicker I can actually execute the events created with the JS and jQuery.
This is the first time I have encountered something like this and I'm finding it very unusual.
There are the two snippets I have used to test whether or not it can identify the element:
jQuery('.hasDatepicker').on('click', function() {
alert('hi');
});
function showVolunteers() {
alert("hi");
}
document.querySelector(".hasDatepicker").addEventListener('click', showVolunteers);
Here is a JS fiddle with the HTML for the datepicker: https://jsfiddle.net/e5dnru0e/3/
The datepicker is nested within a fieldset, which I can target so I thought maybe I could try use jQuery('fieldset div.ui-datepicker') but that did not work either.
To triple check I was using the correct selector I tried using some CSS and the CSS works perfectly, so there isn't something wrong with my selector.
Is it possible that it has somehow restricted jQuery to be used within this datepicker.
Any help or suggestions will be greatly appreciated.
When your are registering an event for any DOM element then it should be present in DOM at the time of registering.
In case of dynamic controls (which are injected to DOM after DOM ready event) you can use following syntax of jquery for registering an event.
$(document).on('click','.ui-datepicker', function() {
alert('hi');
});
Above code attaching click event on document (which is always present on Document ready). Second parameter of on function is [selector] ie. .ui-datepicker
Instead of document, you can attach click event on any other DOM element which is going to
present while registering an event.
i.e
$('.datepicker-container').on('click','.ui-datepicker', function() {
alert('hi');
});
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.
i have a script like accordion,
this my script
$(document).ready(function(){
$('.film').click(function(){
$('.film').attr('id','activeMenu');
$('#film').slideToggle();
});
$('#activeMenu').click(function(){
$('.film').removeAttr("id");
});
});
this is style of activeMenu when it clicked
.activeMenu{
background:#C9FF26;
}
if i click .film and click again , id=activeMenu isn't removed
anyone know this problem?
thanks
Your problem happens because at the time you call $('#activeMenu').click(...) the element you're targeting doesn't actually have that ID.
You could potentially use $(document).on('click', '#activeMenu', ...) (i.e. a delegated event handler) that will work even if #activeMenu doesn't yet exist but I can't help but feel that this would be the wrong solution. It's almost never necessary to dynamically add or remove an ID on an existing element. A proper solution would depend on exactly what it is you're trying to achieve.
You need to use .on method to register click event on #activeMenu
$('#activeMenu').on('click',function(){
$('.film').removeAttr("id");
});
I have the following code:
var $reviewButton = $('span.review_button');
$reviewButton
.live('click',
function(){
$('#add_reviews').show();
}
)
Later in the script, I use an AJAX call to load some content and another instance of $('span.review_button') enters the picture. I updated my code above to use '.live' because the click event was not working with the AJAX generated review button.
This code works, as the .live(click //) event works on both the static 'span.review_button' and the AJAX generated 'span.review_button'
I see however that .live is depracated so I have tried to follow the jquery documentations instructions by switching to '.on' but when I switch to the code below, I have the same problem I had before switching to '.live' in which the click function works with the original instance of 'span.review_button' but not on the AJAX generated instance:
var $reviewButton = $('span.review_button');
$reviewButton
.on('click',
function(){
$('#add_reviews').show();
}
)
Suggestions?
The correct syntax for event delegation is:
$("body").on("click", "span.review_button", function() {
$("#add_reviews").show();
});
Here instead of body you may use any static parent element of "span.review_button".
Attention! As discussed in the comments, you should use string value as a second argument of on() method in delegated events approach, but not a jQuery object.
This is because you need to use the delegation version of on().
$("#parentElement").on('click', '.child', function(){});
#parentElement must exist in the DOM at the time you bind the event.
The event will bubble up the DOM tree, and once it reaches #parentElement, it is checked for it's origin, and if it matches .child, executes the function.
So, with this in mind, it's best to bind the event to the closest parent element existing in the DOM at time of binding - for best performance.
Set your first selector (in this case, div.content) as the parent container that contains the clicked buttons as well as any DOM that will come in using AJAX. If you have to change the entire page for some reason, it can even be change to "body", but you want to try and make the selector as efficient as possible, so narrow it down to the closest parent DOM element that won't change.
Secondly, you want to apply the click action to span.review_button, so that is reflected in the code below.
// $('div.content') is the content area to watch for changes
// 'click' is the action applied to any found elements
// 'span.review_button' the element to apply the selected action 'click' to. jQuery is expecting this to be a string.
$('div.content').on('click', 'span.review_button', function(){
$('#add_reviews').show();
});
I have a script that does graphing, using jqplot. It works fine when the document is loaded rendering each graph using jquery's .each method. However, the problem lies when I replace the div with another one when a bar is clicked. It is suppose to render another graph in the position of the old graph. It changes the graph but does not execute the script.
The script that loads the items has this function to change all divs to graphs:
$("div.barchart").each(function(){
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
is there another way to do this so that it would work when a div is changed too?
Update:
Rails generates a script that is ran. However, it doesn't seem to work when I have this:
chart$=$("#<%=params[:chart_id]%>");
chart$.replaceWith("<%=escape_javascript(render :partial=>"chart_partial"}%>");
barChart(chart$.get(0).attr("id"),chart$.get(0).attr("data-xmlurl"));
Note:
For reference, the actual source code can be found in the jquery_cheats project
Perhaps you could add a listener on the parent element? Is it OK if the barChart() function gets called more than once?
Maybe something like this:
$("div.barchart").parent().on("DOMSubtreeModified", function(e) {
// (or maybe use DOMNodeInserted event instead)
$("div.barchart[id][data-xmlurl]").each(function() {
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
});
You can check out my jsFiddle for this here.
On the current application I'm working on, I'm stuck with version 1.5.2. To get around this, I would unbind and rebind my event and load the initialization in both "ajaxComplete" and "ready". I wasn't able to get the DOM to automatically rebind the event. Delegate is suppose to work like "on", but in my instance I still had to use the below logic.
In short, it would look something like this.
$(document).ready(function () {
InitSomethingCool();
});
$(document).ajaxComplete(function() {
InitSomethingCool();
});
function InitSomethingCool(){
$(".something").unbind('click').click(function(e) {
//Unbind and rebind click event.
alert('You clicked me!');
});
}
Reference:
http://api.jquery.com/on/
http://api.jquery.com/delegate/