jquery issue with new version - javascript

I'm using this sample but I wish to use the latest version of Jquery.
I noticed when using Jquery-ui 1.9.0 or above, the dialog does not show up anymore. It works fine with the original version (1.0.8) available in the demo.
Same thing if I use Jquery 2.2.1 (Jquery not Jquery -ui) instead of 1.4.2
The only change I have tried was replacing $('a.delete').live('click',function(){ by $('delete').on('click', 'a', function(){ in order to remedy to the deprecated .live
I can't figure out what else needs to be changed, even after looking at the Jquery and Jquery change logs. The Jquery-migrate tool doesn't give anything wrong.
The goal of the script is to remove a line when clicking on the icon. A dialog should be displayed to invite the user to confirm/cancel.

$('delete').on('click', 'a', function(){})
is not equivalent to
$('a.delete').live('click',function(){})`
These do two different things.
Your .live() one is actually attaching an event to document and then checking to see if the element actually clicked was a child <a class="delete"> tag.
In your .on() example, you are trying to bind an event to a <delete> element, and check to see if the actual element triggered was a child <a>. This is obviously not what you want.
If your elements are being added to the page dynamically, then you can try:
$(document).on('click', 'a.delete', function(){});
This will be the same as your .live().

Why are you changing the selector?
$('a.delete').live('click',function(){})
should be changed to:
$('a.delete').on('click',function(){})
or
$('a.delete').click(function(){})

Related

jquery Click Simulation using class attribute not working

I want to simulate click on a button from visjs library in my angular app.
The class of that button, in the library is .vis-zoomExtends.
I've tried the following 2 ways, but neither of these is working:
angular.element('.vis-zoomExtends').trigger('click');
and
angular.element('.vis-zoomExtends')[0].click();
Any idea what I'm doing wrong here ?
EDIT: This is the click button on which I'm trying to simulate click event:
Vis navigation buttons
You need to use standard DOM API, angular.element does not find elements by tag name / CSS selector.
document.querySelector('.vis-zoomExtends').click();
Use document.querySelector inside element.
angular.element(document.querySelector('.vis-zoomExtends')).click();
Or use triggerHandler.
angular.element('.vis-zoomExtends').triggerHandler('click');
I dont know much about angular js what it does or can do. but you can use jquery's trigger function totrigger a click event
$('#parent_element').find('your_elemnt').trigger('click');

How to click something in the DOM with jquery?

I have looked around for this but cant seem to get this working. How do I click something in the DOM with jQuery, not a user action, but JS action?
JS:
$('a#more').click();
HTML:
<a id="more" href="www.ksl.com">click</a>
See jsfiddle: https://jsfiddle.net/qw7b2ou3/1/
If you want to follow the click, you have to call the DOM method, not the jQuery click method.
$('a#more')[0].click();
or
$('a#more').get(0).click();
The reason why $('a#more').click(); or $('a#more').trigger("click"); does not work is because it only triggers the event handlers attached, it does not actually click the link.
See this JSFiddle to help you out. You will notice this code console logs your selector in an array:
var selectMe = $('a#more');
console.log(selectMe); // [a#more, prevObject: n.fn.init[1], context: document, selector: "a#more"]
To get this selector element you are trying to click you need to access that index of the array.
selectMe[0].click();
Here is the fiddle -- https://jsfiddle.net/qw7b2ou3/2/

Jquery Toggle on click of image

I am trying to understand how the jquery toggle works. I want to toggle to next anchor with class plr-anchor on click of image with class go_down. The data is populated using maps.
Jquery code:
$('.go_down').on('click',function(e){
#('.plr-anchor').next('.plr-anchor').toggle()});
}
Code snippet:
{data.map(function(categ) {
return <div>
<a className="plr-anchor" id={categ.short_name}></a>
<img src="/static/img/icon_up.png" className="go_down"/>
</div>}.bind(this)}
There seems to be a problem with the syntax on the Jquery call function. I am newbie with Jquery, any help will be great. Thanks in advance.
You have used # instead of $ inside click handler. Also you need to find exact plr-anchor which is before the clicked image. Right now you are toggling all plr-anchor.
For dynamic elements, use $(document).on(event, selector, function(){}); for binding click handlers. See below code
$(function(){
$(document).on('click','.go_down',function(e){
$(this).prev('.plr-anchor').toggle();
});
});
Your jQuery code has a "#" instead of a "$". By the way, React and jQuery don't always go together. The whole purpose of React is to use virtual dom and let React take care of dom updates. While jQuery is mostly about direct dom manipulation. What you are trying here will interfere with React because it won't expect the dom to change without the v-dom changing.
Ideally, you should be using event handlers and state in your component to toggle visibility.

Add dynamic handler with dojo

I'm using dojo v1.6 and trying to dynamically add an event handler to the menu onShow event. There's no exceptions thrown yet the alert window is not displayed. What do I do wrong?
dojo.require("dojox.NodeList.delegate");
dojo.query("body").delegate(dojo.byId("dijit_Menu_1"), "onshow", function(){
alert("Show!!!");
});
dijit.byId of the menu with onOpen seems to be working fine for me .
Check this fiddle http://jsfiddle.net/prak5190/bEurr/3/
Also make sure that you are taking the id of the right dijit (was making that mistake - was using dijit_Menu_1 instead of dijit_Menu_0 ). Better to either keep a reference of the widget or give it an id .

How to make function work after append

For example i'm using append, and for example i'm appendig button in to a div, and i have function $('button_id').click(... etc to work affter i append the div, how can i do that.I mean i get no errors, but the function is not starting, it's because i append and then i want to use the function but how to do that, i tryed with delegate, but same thing.I tryed with function in the button tag , onmouseover and then the function thing, but nothing it gives me function not found.What is the solution ?
I have two events, one event is click event that appends button, the other event is click event that does something if the button that was appended is clicked, but that second event is not working ?
Try using :
$(elem).live(...)
It will bind event for now and in the future.
Firstly, it always helps if you show us the exact source code. $('button_id') is the incorrect selector to start with, try something more along the lines of $('#button_id') as your selector. Also, are you appending dynamic content? Anyways, I've always used the delegate() function quite successfully, but have you tried using the live() function? Also, one more thing to make sure of is that you have the newest version of jQuery as your source.
As was stated as well, you can not have duplicate ids, if you want to have a pointer, use class, instead of id="some_id" use class="appended". To select those using jQuery, use the selector like this $('.appended').
Try something like this it will work as per your expectations.
$("#button_id").click(function(){
//On click code goes here
}).appendTo($("#div_id"));
It's difficult to determine the problem you're having without seeing your code, but delegate (or live) should be perfect for what you're trying to do:
$("body").delegate("#b", "click", function() {
alert("ok");
});
$("#example").append('<input type="button" id="b" value="Click" />');
The click handler above will fire when an element with id="b" is clicked, whether or not that element happens to be in the DOM right now or not.
However, as others have noted, it's important to remember that IDs need to be unique within a document, so by the sounds of it you may be better of using classes instead.
You can see an example of the above code running here.

Categories

Resources