I have the following jQuery code:
$('#temp_modals').on('mouseleave','*[data-username]',function() {
///my logic
});
However I need to to have the mouseleave event on the the parent div of *[data-username].
As this element is added dynamically to the webpage I cannot use a normal selector and need to use the $.on.
In short I want to achieve that code like this runs.
$('#temp_modals').on('mouseleave','*[data-username]'.parent(),function() {
///my logic
});
How can I do that?
Try
$('#temp_modals').on('mouseleave','*:has(> [data-username])',function(event) {
///my logic
// this should get you the parent.
$(event.target).parent();
});
Demo: Fiddle
According to the spec this should work
http://api.jquery.com/parent-selector/
$('#temp_modals').on('mouseleave','*[data-username]:parent',function() {
///my logic
});
EDIT : Indeed this won't work, thanks for pointing it out, :parent doesn't do what i was expected. This will work :
$('#temp_modals').on('mouseleave',$('*[data-username]').parent(),function() {
console.log(this)
});
Related
I am trying to toggle a sidebar, but it works only once. I think the query code is self explanatory. Though I can write the HTML code if you want.
$('.side-menu').on('click', function(){
$('.control-sidebar').addClass('active-sidebar');
$('.side-menu').on('click', function(){
$('.control-sidebar').removeClass('active-sidebar');
});
});
A clean code solution would look somehow like this:
$('.side-menu').on('click', function(){
$('.control-sidebar').toggleClass('active-sidebar');
});
I think the logic is not right in your case.
if(!$('.control-sidebar').hasClass('active-sidebar')){...}
This code will run when class "control-sidebar" don't have class "active-sidebar".
at the beginning, the case happens so you can click on .side-menu and add class "active-sidebar" to DOM. this against your first logic.
Moreover, why this happens twice in your code?
$('.side-menu').on('click', function(){...}
Solution:
Use toggle class: see this https://jsfiddle.net/BeklievParviz/rwnpk0wm/
$('.side-menu').on('click', function(){
$('.control-sidebar').toggleClass('active-sidebar');
});
User This
I want to trigger ng-click of an element at runtime like:
_ele.click();
OR
_ele.trigger('click', function());
How can this be done?
The syntax is the following:
function clickOnUpload() {
$timeout(function() {
angular.element('#myselector').triggerHandler('click');
});
};
// Using Angular Extend
angular.extend($scope, {
clickOnUpload: clickOnUpload
});
// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;
More info on Angular Extend way here.
If you are using old versions of angular, you should use trigger instead of triggerHandler.
If you need to apply stop propagation you can use this method as follows:
<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
Something
</a>
angular.element(domElement).triggerHandler('click');
EDIT:
It appears that you have to break out of the current $apply() cycle. One way to do this is using $timeout():
$timeout(function() {
angular.element(domElement).triggerHandler('click');
}, 0);
See fiddle: http://jsfiddle.net/t34z7/
This following solution works for me :
angular.element(document.querySelector('#myselector')).click();
instead of :
angular.element('#myselector').triggerHandler('click');
Just in case everybody see's it, I added additional duplicating answer with an important line which will not break event propagation
$scope.clickOnUpload = function ($event) {
$event.stopPropagation(); // <-- this is important
$timeout(function() {
angular.element(domElement).trigger('click');
}, 0);
};
Using plain old JavaScript worked for me:
document.querySelector('#elementName').click();
The best solution is to use:
domElement.click()
Because the angularjs triggerHandler(angular.element(domElement).triggerHandler('click')) click events does not bubble up in the DOM hierarchy, but the one above does - just like a normal mouse click.
https://docs.angularjs.org/api/ng/function/angular.element
http://api.jquery.com/triggerhandler/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
You can do like
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
This code will not work (throw an error when clicked):
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
You need to use the querySelector as follows:
$timeout(function() {
angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Simple sample:
HTML
<div id='player'>
<div id="my-button" ng-click="someFuntion()">Someone</div>
</div>
JavaScript
$timeout(function() {
angular.element('#my-button').triggerHandler('click');
}, 0);
What this does is look for the button's id and perform a click action. Voila.
Source: https://techiedan.com/angularjs-how-to-trigger-click/
Include following line in your method there you want to trigger click event
angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});
I have read a lot of questions here about click function and i try to follow the answers, but i can't make it work.
There is definitely logical problem.
Does not matter what is lower the 2nd line, because the console.log doesn't logs anything.
Here is the code:
$('#play')[0].click(function() {
console.log('click');
$("html,body").animate({
scrollTop : arrOfDivs[2].offset().top - 80
}, 700);
return false;
});
Here is jsfiddle: http://jsfiddle.net/W3y88/
Thanks!
i updated your code http://jsfiddle.net/W3y88/3/
$('#play').on("click",function() {
alert('click');
return false;
});
One issue here is that when you declare an ID, you can only use it once on the page. If you want to affect multiple instances, you should consider using classes on those items you want to alter.
Try changing your id to a class, then change your code to:
$('.play').click(function() {
console.log('click');
$("html,body").animate({
scrollTop : arrOfDivs[2].offset().top - 80
}, 700);
return false;});
Of course, I am assuming you have given multiple objects the same id. If you could paste more code, it would be helpful.
A reference on ID's: https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really
Alternately, you can remove the [0] if you are referring to a unique ID and your original code may work.
There are few ways you can do this: http://jsfiddle.net/DWU5Y/
But, you had few thigns missing:
The script include for Jquery.
The id is unique so I am not sure why you used $('#id')[0]
doc.ready vs windows load: http://forum.jquery.com/topic/document-ready-and-window-onload-difference
Further if you keen : Running jQuery inside $(window).load() function but not inside $(document).ready function
http://learn.jquery.com/using-jquery-core/selecting-elements/
:)
Code
$(document).ready(function() {
$('#play').click(function () {
alert('click');
return false;
});
});
Try this , it will work.
$('#clickme').live ('click', function (){
Things to do
})
I know this should be easy stuff, but for some reason the click event is still firing for the element that has a "selected" class.
Can anyone spot the problem with this line?
h.find("li a").not("li a.selected").click(function () {
Use
.not('.selected')
The not() filter applies to the current element
$(function() {
$('div:not[.someclass]').click(function() {
// do stuff
});
});
So I have this jquery function that's supposed to show a class's hidden span on hover. How do i set up the function so it only shows the selected div's child span (instead of showing all the spans on the page)?
Here's my jquery function:
$(".thumb").hover(
function() {
$(".blurb").show();
},
function(){
$(".blurb").hide();
}
);
You can view the jsfidde here. Thanks!
That's what this is for!
$(".thumb").hover(
function() {
$(this).children('.blurb').show();
},
function(){
$(this).children('.blurb').hide();
}
);
Use $(this).children() instead of executing a global query again:
$(".thumb").hover(function() {
$(this).children().show();
}, function() {
$(this).children().hide();
});
Working demo: http://jsfiddle.net/h5x3f/2/
Note: if you're not bothered about supporting Internet Explorer 6, you can avoid jQuery/JavaScript completely and use CSS's :hover pseudo-class, which will even work with JS disabled. Or you could use a shim like ie-7.js to handle :hover for you. See this variation of your fiddle for an example.
Select the div first and then its children, e.g.
$("#mydiv").children(".blurb").show();
here you have another solution using the 'find' function:
$(".thumb").hover(
function() {
$(this).find(".blurb").show();
}, function() {
$(this).find(".blurb").hide();
}
);