How to get the pointed item with jquery.I mean by pointed item, if the mouse click on some div in the body, i want to get that div's info , or click on a select box or etc.. so they are no tchoasen by me, the selected items are all html elements in the web, just i want to recieve the info of the element witch i have been clicked on.
$(document.body).click(function(ev) {
$(ev.target); // is the clicked element
});
Live Example
ev.target .click
http://api.jquery.com/category/events/event-object/
http://api.jquery.com/event.currentTarget/
Hmm, I am not sure if I understand your question but are you are refering to .html() method. The examples below will pop up the div's content upon click or hover.
Example
<div id='test'>Content of div</div>
//on click
$('#.test').click(function(){
alert($(this).html());
});
//on hover
$('#.test').hover(function(){
alert($(this).html());
});
Assume you have a div having id 'test' inside your body element. Register event by jQuery as:
$("div#test").click(function(event){
alert(event.target);
/*here event is the object fired, and target is the Div element i.e. source or you can use 'this' to refer to Div element*/
alert(this);
// Here 'event.target' and 'this' will give the same Div element.
});
Related
In my html code i change the background color of all elements with the id '#mutable', with a click on button 'blue' or 'red'.
With the third button 'load' i .append() a new HTML with the same id.
But the background color does not change for the new elements?
Whats going wrong?
fiddle
html
<div id="mutable" style="width:50px;height:50px;" class="blue">sjdfhksfh</div>
<div id="newHTML">newHTML</div>
js
$(document).ready(function() {
$('#blue').on('click', function() {
$('#mutable').trigger('blue');
});
$('#red').on('click', function() {
$('#mutable').trigger('red');
});
$('#load').live('click', function(event) {
event.preventDefault();
$('#newHTML').after('<div id=\"mutable\" style=\"width:50px;height:50px;\">...</div>');
event.stopPropagation();
});
$('#mutable').bind('red', function(e) {
$('#mutable').addClass('red').removeClass('blue');
});
$('#mutable').bind('blue', function(e) {
$('#mutable').addClass('blue').removeClass('red');
});
});
You are always creating a new div with the id #mutable. Now jQuery in terms of an ID just runs down the DOM and when it finds the first occurance of your ID, it changes it, but nothing else.
For some solutions, you could use a class .mutable instead of an id - but then every created div would be changed on click.
Or you could enumerate your IDs with a number like #mutable1, #mutable2 and so on and change your menu to select the specific div.
Or, to change just the last occurance of your dynamically created divs, use the :last - CSS- Pseudoclass.
1) id should be unique at page. And selectors like #mutable match only first element with such id -- So after pressing 'load' you create new element with the same id, but $ still match old one
2) try next ( I just change your id-selector into attr-selector which allow find all elements with id ):
$('#mutable').bind('blue', function(e) {
//alert('blue');
$('[id=mutable]:last').addClass('blue').removeClass('red');
});
http://jsfiddle.net/q3wzwr6z/
Is there any difference between a div cloned and a div generated in a loop ?
I have two situations:
div 1 :
$('.div1').clone(true).insertAfter('.created_form');
div 2 :
loop
<div class="div2"></div>
endloop
I have a button in each div, to delete the div when the button is pressed.
But the button for delete work only for the cloned div (div1).
For div 2 is not working.
My code for deleting the div is :
$('.buttons').on('click', '.minus_sign', function() {
var parent_id = $(this).parent().attr('id');
$("#"+parent_id).remove();
$("input[name='"+parent_id+"']").remove();
});
Can someone tell me why this is not working for both please ? I mention that the div is exaclty the same, only the id is different! Thank you
That's because the one created without the clone doesn't have an id attribute.
<div class="div2"></div>
However, if you were give it an id:
<div id="myDiv" class="div2"></div>
it would work.
Assuming the original element had an id attribute, the one you're creating inside the loop doesn't have an id attribute as mentioned in this answer.
Even if it has one, since you're using .clone(true), the clone will have the data and event handlers of the cloned element.
But the one created inside loop does not contain the event handler.
And the event delegation will not work since you're delegating the click of .minus_sign to the button which is also dynamically created.
You should delegate the event handler to a static element, for example
$(document).on('click', '.buttons .minus_sign', function() {
var parent_id = $(this).parent().attr('id');
$("#"+parent_id).remove();
$("input[name='"+parent_id+"']").remove();
});
BTW, Since remove() method returns the removed element, you can do the above like
$(document).on('click', '.buttons .minus_sign', function() {
var parent_id = $(this).parent().remove().attr('id');
$("input[name='"+parent_id+"']").remove();
});
i have 2 div elements, and if i click on the first div then should the other div which is inside of the clicked div displayed, but i can't understand who it works, my jquery code is so:
jQuery('.infobutton').click(function(){
var clickedID = jQuery(this).attr('id');
jQuery(clickedID).children('div').toggle();
});
<div class="infobutton" id="infobtn1">
<div class="content">some content</div>
</div>
I get everytime right id, i tried also with .first(), .parent(), .children('.content')
It's possible to do this with jQuery?
Let's presume you have HTML like this:
<div id="container" class="infobutton">
Some content
<div>Some other content</div>
</div>
Now let's walk through your Javascript:
jQuery('.infobutton').click(function(){
Find elements with the class infobutton and assign a click handler. This works fine.
var clickedID = jQuery(this).attr('id');
Put the id of that element in the variable clickedID. The value of clickedID is now container.
jQuery(clickedID).children('div').toggle();
Run the jQuery selector on clickedID. Here we have the problem. This can be boiled down to jQuery('container'). This looks for an element with the tag name container, not with the ID container.
In fact, the solution to all of this is not to use the ID at all. Instead, you can build the jQuery object with this, which is a reference to the clicked element:
jQuery('.infobutton').click(function(){
jQuery(this).children('div').toggle();
});
Inside the event handler this will refer the element to which the handler was attached to
jQuery('.infobutton').click(function(){
jQuery(this).children('.content').toggle();
});
Demo: Fiddle
Use this
jQuery('.infobutton').click(function(){
jQuery(this).children('.content').toggle();
});
this refers to the current element inside the event .
your code will work as
use jQuery('#'+clickedID) instead of jQuery(clickedID)
I want danamically create select element in horizontal block. And have funny result. What is the correct way?
JSFiddle
You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.
Demo here: http://jsfiddle.net/Palestinian/rKGtQ/
Code:
// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');
// apply styles on select menu
$("#sm").selectmenu();
// add options to controlgroup
$( "#test" ).controlgroup( "option", "corners", true );
// create controlgroup
$( "#test" ).controlgroup().trigger('create');
controlgroup div ID is #test.
I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.
Namely, the $("#sm") line doesn't know which select you are trying to target.
Maybe you should try something like this:
$("button").click(function () {
$("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
$("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});
Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.
Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle
$("button").click(function show_filters() {
//alert("Hello");
$("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
$(".sm:last").selectmenu();
})
Updated Fiddle
change the $("#sm").selectmenu(); to $("select").selectmenu();
With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.
Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/
I am aware that e.target contains the info of the element just below the cursor, but what if I want to know the class name of the div which has a table>tr>td>button in it and I'm clicking that button inside that td. I know this events bubbles up and there should be a way to find out if the div exists in that bubbling levels. Any help.
Scenario: button is inside a modal window. How do I find the modal windows class name on click of the button inside it.
Use .closest() to traverse up the DOM to the nearest match:
var parentDiv = $(yourButton).closest('div');
Or in the button's click:
$(yourButton).click(function() {
var nearestParentDiv = $(this).closest('div');
// And read its class
console.log(nearestParentDiv.attr('class'));
});
The selector .closest() accepts can of course be more specific than this, so if if the modal window <div> has some known class but you need to inspect its other classes, you should use the more specific selector.
Yes as you say the event will bubble up to your div, so just make the div handle the event with .on() , like this:
$('#yourdiv').on('click',':button',function(e) {
alert( $(e.delegateTarget).attr('class') );//alerts the classes of #yourdiv
alert( $(this).attr('id'));//alerts the id of the clicked button (if have one)
});
UPDATE:
Fixed obtaining the reference to the original div where the event was attached. With event.delegateTarget from the Event object . Thanks Cristophe and Kevin B. for spotting the error.
See working demo
You can use .parent() to get the parent div attributes like id: http://jsbin.com/ololad/1/edit
$('button').click(function(){
console.log($(this).parent().attr('id'));
});