Access Parent Element Within href - javascript

So... this is a simple question with a simple answer, but somehow my RTFMing isn't proving any results.
I have a link within a div, like so:
<div> <a href=''>Close</a>
I'd like to close that div with that link, and I've been trying the following code:
<div> Close
However, it still hasn't worked... any suggestions are greatly appreciated.

Change it to this:
<div> Close
The reason is that when using href="javascript:..., this doesn't refer to the element that received the event.
You need to be in an event handler like onclick for that.

Related

How to use click event on <a> tag

How to use click event on tag without id
Hello everybody, I have a html tag bellow:
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable" href="https://www.youtube.com/watch?v=XXXXX"><div class="fc-content"> <span class="fc-title">event</span></div><div class="fc-resizer fc-end-resizer"></div></a>
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag.
What I want is when I click on this tag, it will open a new windows with href for me. I tried to use
$('.fc-day-grid-event).on('click, function() {
...//
});
But it's not working.
How should I do for this case? Please help.
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag
If you can't control when that happens, you can still use event delegation to get involved in the click event:
$(document).on('click', '.fc-day-grid-event', function() {
...//
});
That works even if the code runs before the element exists. The code in your question only works if the element exists as of when your code runs. See the documentation for details.
As the code is generated after the page rendering, you should use a delegated event handler:
$('body').on('click','.fc-day-grid-event', function() {
//...
});
The original code is missing apostrophes after the class name and after the 'click'.
This should work:
> $('.fc-day-grid-event').on('click', function() {
...//
});
However you might consider to check, if there are other dom elements with that class. An ID is much safer. A workaround could be to use multiple classes in the jQuery selection by selecting the element(s), that matches them all:
$('.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable')
but this might still be not sufficient, because these framework-classes seem to be dynamically created and maybe deleted and the selection might be too wide or too narow. You could try to select the a tag with parent/child relations, where you know, that you are getting the right element and you could even use the innerHTML of the elements. Alternatively you could iterate through a JQuery-Selection and check for certain attributes.
I'm not sure, if you want to change the target of the link or the target window of the link. Opening the target of a link in a new window works with standard html by using the target attribute
<a href='bla' target='_blank'>bla ...
If you use Javascript for manipulating the target adress of a link outside of the href, the code might get hard to maintain in most contexts and the user might get confused, because he get's to page, he didn't expect. I would try to manipulate the Javascript, that is creating the a tag or if that's really impossible, i would manipulate the existing a tag according to my needs and change the attributes like this, if you want to use jQuery:
For the target address of the link:
$('.fc-day-grid-event').attr("href", "www.newhrefvalue.com")
Or for opening the link in a new tab:
$('.fc-day-grid-event').attr("target", "_blank")
Then you don't need to prevent or emit events or create event listeners.
<a onclick="doStuff(this)">Click Me</a>

ng-click is not working with any of my divs

I have a simple un-ordered list populated with ng-repeat and I want something to happen every time a user clicks on one of the list items. However, ng-click doesn't seem to be working with any of the divs inside my html, it only works with buttons. At first I thought the issue would be with the ng-repeat but it turns out that even outside of the ng-repeat ng-click does not seem to work. I have tried using ng-mousedown as well, and it doesn't seem to be working either.
Here is my html:
<div class="noteItem" ng-mouseleave="btnShow = false" ng-mouseenter="btnShow = true" ng-click="alert('click');">
<li>
{{note.subject|removeHTML}}<a ng-show="btnShow" ng-click="deleteNote(note._id)"><i>DELETE</i></a>
</li>
</div>
I have tried wrapping another div outside of this div as well but it still didn't work. I have been stuck on this problem for about an hour now.
You have ng-click in div and also in <a> element, the one being executed is in the <a> element not the ng-click in div.
Try to add div like this and try to click.
<div ng-click="yourScopeMethodHere()">click me</div>
BTW, directly calling JS alert() in ng-click will not work.
When the ng click get executed it looks for scope function and expressions. alerts and console logs neither of it so it won't get executed like this. What you can do is create a scope function and call the alert inside that function.
As you have a ng-click on the parent element (<div>) as well, the click will be triggered on both. You can cancel parent ng-click on the child with $event.stopPropagation().
<div ng-mouseleave="btnShow = false" ng-mouseenter="btnShow = true" ng-click="alert('click');">
<li>
{{note.subject|removeHTML}}
<a ng-show="btnShow" ng-click="$event.stopPropagation(); deleteNote(note._id)"><i>DELETE</i></a>
</li>
</div>
As a side note, ng-click="alert('click') will seek for $scope.alert(), if you are hoping to open the JavaScript basic alert... ;-)

javascript: function of a div in another div having another function

I have a nested div.
The child div is inside the parent div.
How can I distinguish the correct onClick function?
In this case, only the function of parent div is called no matter clicking where I click on the nested div.
<div class="portfo" onclick="showValue()">
<div id="cross" onclick="deleteValue()">
<img src='cross.png' height='15px' width='15px' alt='some'>
</div>
</div>
However, showValue is always called whenever I click on the children div.
delete is a reserved word. Try renaming that function to something else. Then both events should fire when click on the image. First the delete event and then the showval one
I think a library like jQuery can help you out here. Take a look at the .on() method.
I think your problem has to do with Event Propogation. This should help you solve it: Prevent event propogation
Also, delete() is a predefined function in JavaScript, you should rename it to something else, unless you're trying to use the built-in function, in that case, please look at the proper usage: delete

using .replaceWith() jQuery

I have a div that has this elements:
<div id = "menu">
<a>Elemento1</a><br/>
<a>Elemento2</a><br/>
<a>Elemento3</a><br/>
</div>
Each time one of the elements gets clicked I want a new div with different content to be added beside this list, depending on which element is clicked, it should add a diferent list. I'm new to web development, and I found that using the jQuery function .replaceWith() may do it, but is there any way I can use this function, adding divs I got in other .html files?
Thanks!
To get a certain part of another HTML file, use jQuery load function. A basic usage in your case, would be:
$('#result').load('ajax/test.html #container_you_want_to_load');
To add an element after or before the link, you have a few choices. The question is if you really need it. Perhaps it's enough to define one target div into which you'll load your content. In that case, the above example would suit perfectly.
If you however want to add element next to <a> tag, consider using after or before jQuery functions.
To catch a click even on one of your links, check click
Why not just have <div id="content"></div> after the menu, then use
$("#content").load("your_file.html");?
replaceWith is used to replace some DOM elements with different ones. I don't think this function can solve this.
You can use .load function to get html files content and insert it wherever you want. Just bind a click event to every link and use their href atributtes to get the respective file. Don't forget to return false in the end of the event.
something like this:
<div id="menu">
Elemento1
Elemento2
Elemento3
</div>
<div id="content"></div>
$("#menu a").click(function(){
$("#content").load(this.href);
return false;
});

jQuery, <div> loading itself using generated links that are clickable more than once

I got following problem: I generate a div with "jQuery-Load" links. Theese links inside the div should reload the same div with different parameters. I found a working solution, which generates theese links, which are clickable and... ...trigger the chosen event once. So clicking the same link inside the generated div, after it has been regenerated, doesnt work anymore. Tried a lot of things...
It looks like that now:
click
<div id="aaa0"> I'm the div - level1! </div>
div gets filled - beautyful.
It now contains this: (actually its generated what is why wrote [time] wich is time(); generated in php. as a changing parameter
[...] Link inside Updated Div [...]
when i click the link inside the div it works. when i click it again, it wont...
I want to generate a nice 'click deeper inside the data'-thing, which would be amazing getting this thing work and is the reason why everything must be as best as possible inside the "onclick" event :|
Sorry btw. for the a bit confusing post-style, its a confusing topic, and im not native speaking :)
Thanks for any help or hint in advance,
Harry
Maybe you're missing the concepts between bind and live. In bind, jQuery scans the document and attach a function direct to the element. In live, jQuery attach the function to the document, along with the event and the element as parameters. Once a event bubbles, jQuery check the event and the element, and if it match, then a function executes.
After the first run, the dom has changed, and its gonna work using live.
something like that should work:
click
<div id="aaa0"> I'm the div - level1! </div>
<script>
$('a').live('click', function (e) {
e.preventDefault();
var id = this.id;
$(this).next('div').load('getdetails.php?fNumber=36&env=fun&id=' + id);
});
</script>
basically, what is done is a generic rule, which gives all tags the same behavior. (load next div content). ".live()" is used so that loaded tags work (check the jquery documentation for .live(), or event delegation in general).
I'm not certain about the preventDefault stuff. You might want to use somehting else than tag for the link.
click
made the day :) I don't know exactly why, but maybe its possible preventDefault made the bind and live thing for me. Its working fine, so ...
thanks for the hints! :D

Categories

Resources