Can't Set Event Listeners To Multiple Elements Of Same Class
Dec 3, 2009I'm trying to add event listeners to multiple elements of the same class. The DOM is something like this [code]...
View 5 RepliesI'm trying to add event listeners to multiple elements of the same class. The DOM is something like this [code]...
View 5 RepliesThe DOM Level 3 specification has a section (1.2.2.2) that talks briefly about "groups" of event listeners. What does this mean? Is this similar to attaching event listeners with a namespace, as in jQuery: "event.my_namespace"?
View 2 Replies View RelatedThe short of it is that I am trying to change the background color of all elements with a particular class name. I know there is no getElementsByClassName (wouldn't it be nice if there were?), but is there a simple way to do it? Alternatively, is there a way to apply changes to multiple id's?
View 3 Replies View RelatedI am making a system whereby if an element has a class "editable", you can click it and a popup box appears with some options about that particular element. Fairly straightforward, I'm using [code]...
This works fine but I need to be able to have lots of different divs, all with class "editable", some of which are inside others with class "editable". Like this [code]...
However, clicking on the 'somethingelse' div, triggers the click correctly but also triggers it for the parent 'something' div, so I end up with the popup box appearing twice.
Does anyone know how to just catch a click event on the exact div (without using ids) without triggering the parent?
I feel like I must be missing something simple but I can't put my finger on it...
I'm moderately new to JS (programmed in other languages though) and am working on a Google Maps project.
This piece of code should show an alert of the region's name when a map polygon is clicked. Instead, no matter what polygon is clicked, it only does the name for the LAST iterated placemark. code...
What am I missing? What would be a better way of handling this?
Does anyone know where I can find a complete list of DOM/DHTML event types documented?
I'm trying to learn more about advanced event handling in JavaScript and I'd like to find lists of event types that I can attach/add event listeners to. I've been searching around and I've found a few resources, but nothing that seems complete.code...
Here's the situation: I have a javascript object for controlling a custom DHTML scrollbar. So that I can use more than one on a page, the event listeners need to be passed a reference to the particular instance of the object that each needs to connect to, but as I discovered the hard way, inside an event listener, 'this' returns a reference to the DOM object throwing the event, rather than to the JS object. Short of coming up with a linked list of different objects and having the event handler search through it for the right object when an event is generated, then writing a reference to that object to some global variable, is there any convenient way to tie this together? I hope I've made myself clear enough...
View 5 Replies View RelatedI'm having problems removing the event listeners, they dont seem to be removed
(I am currently only checking for non-ie browsers) code...
So I know all about the caviats of the 'this' keyword when calling object functions from event listeners:
Code:
var foo = {bar: true, zoo: function() { return this.bar; }};
foo.zoo();
> true
a = foo.zoo;
a();
>
And I know that I can get around this by using an anonymous function so that 'this' is preserved in it's original context:
[Code]...
But then someone pointed out this article on memory leaks when using anonymous functions to call object methods because the anonymous function gets access to ALL variables in the enclosing environment and my not be properly disposed of by the garbage collector [URL] So that lead me to think about using a "3rd-person" approach to referencing object properties from within object methods.
[Code]...
I have PHP file called file1.php with an empty <div></div> in the middle. I've added a 'load' event listener so that on page load, it calls an AJAX function that calls file2.php. file2.php creates a table and loads it into the <div></div> in file1.php.
file2.php has <a> tags in it's <th> columns and I wish to trap when a user clicks on the column heading. The old way was to use the onclick() method but I'd rather use event listeners.
Here's my problem. I am getting "obj has no properties" when trying to add those listeners. I *think* it is because the code in file2.php isn't part of the original DOM tree for file1.php. So how can I use event listeners instead of onlclick()? I know I can add top the DOM by creating elements and appending them but that adds to the HTML code and my code is already in place via the AJAX call. What to do...? DO I just use the old passe onclick() method?
When catcheck1 is unchecked, I want catcheck9 to uncheck. Why does this not work?
<html><head>
<script type="text/javascript">
// Checkbox event listeners.
function checkboxs() {
document.mapform.catcheck9.checked = false;
}
</script></head><body>
<form action="" name="mapform" id="mapform">
<input type="checkbox" id="catcheck1" name="catcheck9" onclick="checkboxs()" checked />
<input type="checkbox" id="catcheck9" name="catcheck9" checked />
</form></body></html>
I am creating JS objects that have some properties that contain DOM nodes, and some of these DOM nodes have event listeners attached to them. When I delete such objects, do I first need to remove the event listeners attached to some of the DOM nodes? And do I need to use removeChild on the DOM nodes that are properties of the object? Or does JavaScript take care of all that?
View 1 Replies View RelatedI got this problem with live() event.I have used it as follows.
$(".addressDiv span").live("mouseover", function(){
//clickable function here......
------------------------
});
I have used the live() event to trigger the function on mouseover in the dynamically added elements. But the problem i got is that once the live event is called it takes the class of the element and stores. And when the class of that particular element is changed dynamically the live() event does not detect the new classed added dynamically, instead it takes the former class. Live() event does not update the class.
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
How can i get all elements of an html-page which have the attribute class="abc" in an array? I need it for IE 4+, NC 6+.
View 14 Replies View RelatedI need to get a group of elements by class name, e.g. class_a , class_b etc. Is there a standard way of doing this? Basically i have a bunch of containers that need to be displayed on screen when a button is clicked. I woulda thought this a very easy task since ive been doing this with single containers with a single ID using getElementById() for years. I tried using getElementsByClassName() but for some reason im having difficulty getting it to work e.g. iterating over the object. Im not a programming noob, this is just an area of JS im unfamiliar with.
View 4 Replies View Relatedi want to get all element id's with class name=TestDiv how i can do this? Quick response is needed sample code is below :
[Code]...
Is it possible to use JavaScript to delete all elements belonging to a particular CSS class using JavaScript?Would it be possible to delete all td elements in someTable with the class = "b".
View 2 Replies View RelatedThere is simple html like this:
<ul id="icons">
<li class="icon1 hoverNow"><img src="some/pic1.jpg"/></li>
<li class="icon2"><img src="some/pic2.jpg"/></li>
<li class="icon3"><img src="some/pic3.jpg"/></li>
<li class="icon4"><img src="some/pic4.jpg"/></li>
</ul>
where class 'hoverNow' means, that opacity of the image is 1.0, while others 0.5. This done with css.
i want to do, that when mouse hover the 'li' element, image, IF it's not in the li element, who's having class 'hoverNow', become with opacity 1.0, and on mouseover, again will have 0.5 opacity. For this, i write this simple code:
[Code]...
I have a form that has it's HTML inserted into the database (yeah yeahI know..not my idea..I'm new here and just finding this out).Anyway, each form field has an embedded class in the HTML.The form is dynamically generated. Can be anywhere from 5 to 10 to 20to 50 fields.How can I loop over each form field and add a new class to the field
View 8 Replies View RelatedI'm trying to do the following:
$(document).ready(function(){
img=$(".img");
imga=img.attr("href");
$("#imgbox").append("<img src='"+imga+"'/
I need to match an h3 with a p that has the same class. However, there are multiple elements and multiple classes, so I'm trying to store the class in a variable (x) and say "when I hover over the h3 with class x, get the p with class x and fade it in".
I can't seem to get it.
I've got some code like this:
$(".slide-1").hover(
function () { $('.caption-1').animate({ bottom:0 },200); },
function () { $('.caption-1').animate({ bottom:-35 },200); }
[code]....
I don't have to repeat this block over and over manually? I know I can get jQuery to repeat each code block and insert the number automatically.
I'm sure this is much simpler than I have been making it seem in my head so I'm giving up and asking Basically I have a html document being dynamically created by php. In the markup I create some divs (the number of which changes between pages) all of which belong to the same class (class="div") and have id's of the same format (id="div_90001" or "div_88926773"). What I want to do is perform a function on eachelementin the class and extract the number in the id and then perform a function with the number (AJAX) and then return the results to the div (probably some extra markup)
I can handle all the AJAX parts, the extracting of the id number etc... I just can't make a function that will work on all elements in a class. I fear I am not making much sense, I'll try again cos I don't think I'd understand what's above. I have some divs that belong to a class, I want to perform the same function on each of the elements in the class. How is this done?
I would like to use JQuery to iterate through a set of <div> elements that have the same class and scale each value according to a value selected from a dropdown box. For example,
<select id="factor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
[Code].....
I have two functions show after the message. The first works fine. When a checkbox is clicked with the class availableProfile, its class is removed, selectedProfile added. It is then appended to anotehr list and destroyed in the original. However when i click the now moved checkbox it doesn't recognize it has the new class of selectedProfile.
$(".availableProfile").click(function(event) {
elementID = event.target.id;
elementGroup = elementID.split("__");
$(this).removeClass("availableProfile");
[Code]....