I made a website running on an Apache server. The website is only accessed by me. It consists of a drop down list with two options and a "Generate" button. When the button is click, it shows a list of audio elements containing songs. Above each audio element is also a link to the mp3 file itself. I wanted to make a Lightbox
fade in and show the audio element separately when someone clicked on it. I used JQuery to prevent default behaviour when the a tag was clicked, but cannot find a way of only targeting it. This is my problem:
document.addEventListener("click", function(event){
event.preventDefault();});
I have tried changing the document part, but it is showing this error: 'Uncaught TypeError: songPlayer.addEventListener is not a function'. Currently, it is targeting all of the document DOM elements, which is not what I want. Is there any other way of achieving this? Also, does anyone have any tips on making lightboxes? Thanks.
addEventListener needs to be called on a dom element, of soundPlayer has an id of soundPlayer:
var soundPlayer = document.getElementById('soundPlayer');
is what we need,
then we can do:
soundPlayer.addEventListener("click", function(event){
...
In jquery you do the following:
$('#soundPlayer').on('click',function(e){//change #soundPlayer with the css selector of your element
e.preventDefault();
});
Related
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>
Trying to learn some Javascript now that I have a few months of Python under my belt. Having trouble with HTML elements on a page which uses Javascript (not sure that is the right wording).
I have a simple Chrome Extension which I am trying to tell it to click a button when the page loads.
The DOM shows this code more or less:
<body class="skin-mark toolbar-open table-active">
<div class="tile-tables"></div>
</body>
My attempt at clicking the button has been multiple ways similar to this:
document.querySelector('#tile-tables').click();
Any help in understanding the process here and what I am doing wrong would be great! Thanks in advance! Feel free to correct me at any place and I will fix my language.
When you use getElementById you have to pass an element's id to it. There is only one element with an id in your HTML, the outer userActActions-51 - so, if you were to select by ID first, you would do
document.getElementById('userActActions-51')
and then you would access the second nested child:
const userActions = document.getElementById('userActActions-51');
const span = userActions.children[0].children[0];
span.click();
But it would be more convenient to use querySelector for this, which will allow you to use a selector string to select the span descendant of the element with the id userActActions-51 at once:
document.querySelector('#userActActions-51 span').click();
If the element might not exist, then make sure that it exists before trying to click on it:
const span = document.querySelector('#userActActions-51 span');
if (span) span.click();
I have an html element like this:
<div id="myelement_9082173219731721923">
I want to add a class to this element to select it with css.
It is loaded after the other stuff on the site, because it´s generated by an external javascript.
That´s why I tried:
$('[id^="myelement_"]').load(function()
{
alert("im here");
$('[id^="myelement_"]').addClass('myclass');
});
But it doesn´t reach the alert. What am I doing wrong?
Thanks
This should do the work, load on the div element will never happen. Use a DOM change listener instead. And you don't need the quotes around the id selector. It is not wrong, but not a must have.
$("body").on("DOMSubtreeModified", function() {
$('[id^="myelement_"]').addClass('myclass');
});
Working example.
You should change body to the most smallest selector of your DOM, where the div#myelement_ will be appear. And if it happens only one time, change on to one. Then the listener disables itself and will not run constantly on changes.
I am trying to click on an image on my webpage and it open a new section on the page that would be created in css and javascript/jquery. I thought about using .addclass() but i am not entirely sure how to go about it. Can anyone give me an example of this being done?
An example by clicking on a element with the id foo and adding a div with the id bar after that element:
$("#foo").click(function(){
$(this).after('<div id="bar">Some content</div>');
});
Of course, there are multiple methods in jQuery which insert content somewhere in the DOM tree, see:
https://api.jquery.com/category/manipulation/dom-insertion-outside/
https://api.jquery.com/category/manipulation/dom-insertion-inside/
There are many ways to do it. As an example, you can simply attach a click event handler to your image, like so:
$('img').click(newSection);
function newSection() {
$('#someDiv').append('<div class="newSection"></div>');
}
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