I'm looking to dynamically remove li elements from several connected ul lists. Right now I am assigning 'dblclick' event behaviors by using $("#sortable1").children().on('dblclick',function() {...})
The items in #sortable1 will be moved to other lists (#sortable2, #sortable3, etc) by the user.
When a list item is double clicked, a dialog box pops up asking if the user would like to delete it. If the user says yes, I want the list item to be removed from whatever list it is in. I am trying to do it using something like:
$($(this).parent().childNodes[$(this).index()]).remove()
But that doesn't work.
Advice?
Something like this should work.
var showPopup = function( elem ){
//show your popup with a function like this, as i assume it already does...
$( '#delete_toggle' ).one( 'click', function(){
elem.remove();
});
};
$("#sortable1").children().on('dblclick',function(){
showPopup( $(this) );
});
To remove the element that was clicked on, you just use this in the event handler:
$(this).remove();
or if you've saved the element reference to a variable elem, it would be this:
$(elem).remove();
You are trying to make it way more complicated than need be. The jQuery .remove() method looks at who its current parent is and takes care of all that for you.
Related
I have a few links on a webpage. They open a similar dialog window and load equal content via $.load(). Content has ul list and it use $.selectable() plugin:
$('.select-dialog-cities > ul').selectable({filter: 'li'});
I would like to handle the selectableselected event. As I have three links, I need to separate the events. Is it possible without global flags? Something like this:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});
Depending on what you're trying to achieve, you might also just query which elements are actually selected, like this:
$("#selectable").on("selectableselected", function(event, ui){
$('.ui-selected').each(function(){
console.log($(this).text());
});
});
Example on JSFiddle
If you're doing this on different dialog windows, you will probably need to bind to the event every time you create a new dialog window.
To capture that event you should provide a function to the selected property of the object you initialise selectable with. Try this:
$('.select-dialog-cities > ul').selectable({
filter: 'li',
selected: function(e, ui) {
console.log('You chose something!');
}
});
You can get information about the element that raised the event via the selected property of the ui parameter passed to the function.
More info in the jQueryUI Docs
As I sad:
load equal content via $.load(). Content has ul list
I could not assign event this way:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});
Because I forget about one moment from documentation $.on():
Event handlers are bound only to the currently selected elements; they
must exist at the time your code makes the call to .on().
So the solution was very easy:
$("#dialog_id").on("selectableselected", ".select-dialog-cities > ul", function(event, ui){});
I'm creating a Firefox/Chrome Addon that goes on a 3rd party website. On this site, there is a list of about 512 names in one ul. I want to put 12 of them, based on their values and compared to an array.
Each li item looks like so:
<li><a class="manip" href="javascript:void(0);"></a><span class="draggable in-MultiCheckPossibleUserIdslistpair-possible ui-draggable"><a class="user" href="javascript:jQuery.wp.showModalWindow('/OneProof/User/Info/31654022')">Aaron Quinby</a><span class="id">31654022</span><span class="sortNo">1</span></span><span class="preview" style="display: none;">Aaron Quinby</span></li>
Right now, clicking on the a tag, with manip class will bring the li item from one ul to the correct ul. I want to do this automatically with my addon. I figured the quickest way would be to call the .click() event with jQuery on the a tag like so:
$(document).ready(function() {
$(".manip").each(function() {
//quick check to see if it works, click all
$(this).click();
});
});
I've played with the click, calling it in the console, calling it after a delay, and few other ways.
The only JavaScript I can find associated with the manip class in the source for this site is the following:
universe.find("a.manip")
.click(function() {
//alert("bound");
$.dropIt($(this).parent(), false);
});
Is there a reason why the .click call event isn't working?
Thanks!
Edit: Universe is defined here:
function listpairCore(options) {
var options = $.extend({}, $.fn.listPair.options, options);
var thisId = this.attr("id");
var ulSelected = this.find("ul.selected");
var ulPossible = this.find("ul.possible");
var universe = this;
and listpaircore is called here
$.fn.listPair = listpairCore;
The click function does not simulate a click. It binds an event handler to the click event.
What you want is
$(this).trigger( "click" );
Update:
The javascript you found in the source references the "manip" class as
universe.find("a.manip")
so maybe try doing the same?
$(document).ready(function() {
universe.find("a.manip").each(function() {
//quick check to see if it works, click all
$(this).trigger("click");
});
});
In Masonry, it is possible to delete an element by clicking on it. The catch is, that You have to click directly on that element - so if you use these "bricks" as an image gallery (as long as these photos are included as a background image) You can delete them, by clicking on the element. The problem is, when you use these as some messages/info/other content containers. Then, due to formatting-related stuff the parent element gets "hidden" behind other tags, and You can't actually click on it.
The problem is shown here:
http://jsfiddle.net/dan1410/SfU5T/
You can close red boxes, but not green ones, as they are overlapped by another elements.
I've tried code like:
eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'closeable' ) ) {
return;
}
// remove clicked element
msnry.remove( event.target );
// layout remaining item elements
msnry.layout();
});
});
and
var todelete = document.querySelector('.closeable');
eventie.bind( container, 'click', function( event ) {
// remove clicked element
msnry.remove( todelete );
// layout remaining item elements
msnry.layout();
});
});
but You still have to click directly on the element You'd like to close...
My masonry content structure looks like
<div id="masonry" >
<div class="item blue closeable">
<div id="itheader"><h2 class="secsectiontitle">Space available</h2></div>
<div id="itcontent">
some statistics here...<br/>
and here, too
</div>
</div>
Only elements with .closeable class are supposed to be closeable.
So, the question is: how to close an element using a button/a link?
I'm not very familiar with JS, so I'd like to ask You guys for help. Thank You in advance!
Unless there are handlers that stops the propagation of the click event on children elements, the click event should bubble up without any issues.
Also, if you are using jQuery, you should use the jQuery Masonry's API.
Note: I couldn't access your fiddle and couldn't test the solution
var $container = $('#masonry').on('click', '.closeable', function (e) {
$container.masonry('remove', e.currentTarget);
$container.masonry(); //layout
$container.masonry('reloadItems'); //OP said it was also required
});
So I'm using Jquery Drag/Drop to drag and drop something onto a dashboard. I want to now drag anything that I have dropped onto the dashboard out of the dashboard in order to destroy it/remove it from the dashboard.
I've tried adding a class to the thing that is dropped onto the dashboard and then tried adding a draggable to that, but the drag is not working, I think because when I append the element to the dashboard it appears behind the dashboard(the colours are a little faded).
Here is my code-
$(".draggable").draggable({helper:'clone'});
$("#favouritesDashboard").droppable({
accept:".draggable",
drop: function(event,ui) {
var toDrop = $(ui.draggable).clone();
//create smaller version
$(toDrop).addClass("inDashBoard");
$(this).append(toDrop);
}
});
$(".inDashBoard").click(function(){
console.log("clicking elem in dashboard");
});
I've replaced the second draggable with a click, the console.log never prints, suggesting that what I think is going on is actually going on.
Use on for late binding http://api.jquery.com/on/ .
$(document).on('click', '.inDashBoard', function(){
console.log("clicking elem in dashboard");
});
This is due to the nature of event binding / listeners in jQuery.
The elements you want to trigger a click event on do not exist when the page is loaded, they are added dynamically. So to ensure that your method is attached to new elements that match the selector you should use "on" or "live"
$(".inDashBoard").on( "click", function(){
console.log("clicking elem in dashboard");
});
this should work:
$(".inDashBoard").live('click', function(){
console.log("clicking elem in dashboard");
});
I want to obtain the exact details for the item on a web page that has been clicked on, using jquery.
That item can be a form item (like a checkbox, text box, text area etc) or section of text (in a paragraph or div or other) or list or image ...
What I figured out is the following--
$(function(){
$('*')
.bind('click', function(event) {
//now obtain details of item that has been clicked on...
});
});
Now, I want the exact details- viz the div id/form id/paragraph #, ie all details for that particular item. How do i get this data? I understand that this data is available in the DOM but I just dont know how to get it in this particular case...
Probably the best way to do to use the target property of the event. By default, this returns a non-jQuery object, which isn't particularly useful, however wrapping it in $() solves this issue:
$(function() {
$(document).bind('click', function(event) {
var element = $(event.target);
alert(element.height()); // Get height
alert(element.attr('id')); // Get ID attribute
// ...
});
});
If you want to fix your current method, inside your click() handler, you can access the properties of that element using .attr(), and friends:
$(function() {
$('*').bind('click', function(event) {
alert($(this).height()); // Get height
alert($(this).attr('id')); // Get ID attribute
// ...
});
});
$(this) in the scope of the function references the element that was clicked. There is a list of functions that will return attributes here and here in the jQuery docs. $.attr('id') will return the element's ID, among other things, and $.data() will return data-* attributes.
To get attributes of parent elements, simply use $(this).parent(). For example, to get the ID of the form that contains the clicked element, use $(this).closest('form').attr('id');. Everything is relative to the clicked element ($(this)), so you can just use the DOM traversal functions.
However, using $('*').bind() is incredibly inefficient; you're binding an event handler to every element on the page, when really you should delegate events with .on() (jQuery 1.7+):
$(function() {
$('body').on('click', '*', function(event) {
alert($(this).height()); // Get height
alert($(this).attr('id')); // Get ID attribute
// ...
});
});
This approach only binds one event to <body> instead of an event to every element on the page.
Use the target of click event on page
$(document).click(function(event){
/* store native dom node*/
var tgt=event.target;
/* store jQuery object of dom node*/
var $tgt=$(tgt);
/* example element details*/
var details={ id : tgt.id, height: $tgt.height(), tag : tgt.tagName}
console.log( details)
})
Look at the event.target, and then you can use jQuery's .parents() method to look at every ancestor:
$(document).on('click', function(event) {
var $t = $(event.target); // the element that was actually clicked
var $p = $t.parents(); // the target's parents
var $form = $p.filter('form').first(); // the enclosing form, if it exists
});