I have a div in which I have a paragraph and a button like this:
<div id="my_div">
<p>This is a paragraph</p>
<button class="my_btn">Click here!</a>
</div>
The content inside my div is loaded via Ajax. Now let's say that I have something like this in the header of my page to test the button:
$(function(){
$(document).on('click', '.my_btn', function(){
alert('my button works!');
});
});
The problem I'm having is that everytime the content is loaded in my div with my paragraph and my button, when I click on my button I get my alert('my button works!') the same amount of time, meaning, if the content is loaded 100 times, I get my alert 100 times, any idea how I can fix this issue and why this is happening please?
Thank you
This is a bit of a hack but should work
$(function(){
$(document)
.off()
.on( 'click', '.my_btn', function(){
alert('my button works!');
});
});
can you post the ajax call and how you are loading your div for a more detailed explanation.
That said, here is some sample code that seems to work fine. fiddle here
<div id='data' style='display:none;'>
<p>This is a paragraph</p>
<button class="my_btn">Click here!</a></div>
<div id='target'></div>
<button class='load'>this load works</button>
$(document).ready(function() {
$(document).on('click', '.my_btn', function(){
alert('my button works!');
});
$('.load').click(function() {
$('#target').html($('#data').html());
});
});
Related
I load a page inside a div. This div supposed to trigger a function on a mouse click. I would like that this onClick event also works when you click on the loaded page.
If you load a page inside the div, the functions of the loaded page only works for that page.
How can I make it happen that also the onClick function get triggered for the loaded page?
This is a simple example of the code:
function load() {
var url_view = '<object type="text/html" data="http://www.example.com/"></object>';
document.getElementById("image").innerHTML=url_view;
}
window.onload = load;
function showbox() {
alert("test");
}
<div id ="frame" onclick="showbox()">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
To be clear
What I want to achieve is that when you load the page, you'll load data from example.com in a div with the id "image". This event happens with the function 'load()', on window.load.
When that is ready, I would like that you trigger the 'showbox()' function on a mouseclick when you click inside the div with the id "image" (the div where example.com is loaded into).
You can try something like this:
<div id ="frame">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
JS:
function showbox() {
alert("show box");
}
$(document).ready(function() {
$.get('https://jsfiddle.net/about', function(data) {
$('#image').html(data);
showbox();
});
$('#image').click(function() {
showbox();
});
});
Run it on jsfiddle due to CORS: https://jsfiddle.net/usn9qam7/1/
This script is triggered only once when the page loads.
The page has loaded, click the link, the data came from.
Click the link again, nothing.
Overload the page, the link works, etc.
What is wrong in the script, why it triggered only once?
<script>
$(function() {
$('a').click(function() {
$.get('ajax', function(data) {
$('#mydiv').html(data);
});
});
});
</script>
<div id="mydiv">
Update the div!
</div>
Compared the data in the "mydiv" before and after clicking the link:
before clicking the link
<div id="mydiv">
<a href="#">
Update the div!
</a>
</div>
after link was cliked
<div id="mydiv">
<a href="#">
Update the div!
<!--Here is the data that came from.-->
</a>
</div>
Because you're overwriting the a tag that you attached the click event to, you'd need to rerun the code that attaches the click event again. Or you could use event delegation like blex suggests:
$(document).on("click", "a", function(){
}
Because of dynamically created a you should use:
$(document).on("click", "a", function() {
I have the following HTML code. How can create a link on the entire div which when people click on it would take them to a specific link? basically an "<a></a>" tag on the entire DIV
<div class="unique">
<div>
<p>Lines of text</p>
<p>Extra lines of text</p>
</div>
</div>
here is my jQuery script i have come up with, i just have no idea how to make the link in it
<script>
$( ".unique" ).mouseover(function() {
$(this).LINK_TO_A_SPECIFIC_URL;
});
</script>
I know this is not quite what you asked for. But, #undefined made a good point in his comment to your post.
So instead of just auto forwarding to another page on a mouseover why not (if it's not clear to the user) advise that clicking will take them somewhere else. That's just nicer.
Your markup:
<div class="unique">
<div>
<p>Lines of text</p>
<p>Extra lines of text</p>
</div>
</div>
jQuery:
var fetchContent = $('.unique').html();
$(document).ready(function(){
$('.unique').on('mouseenter',function(){
$(this).html('Click here and we\'ll go somewhere else!');
});
$('.unique').on('mouseleave',function(){
$(this).html(fetchContent);
});
$('.unique').on('click',function(){
location.href='go-to-your-url';
});
});
Here's a fiddle: http://jsfiddle.net/6b8ku/1/
How about this:
<script>
$( ".unique" ).click(function() {
window.location = LINK_TO_A_SPECIFIC_URL;
});
</script>
You can change the mouse icon, when mouse over the div :
<script>
$( ".unique" ).mouseover(function() {
$(this).css( 'cursor', 'pointer' );
});
</script>
here is the JSFiddle:
http://jsfiddle.net/9zyeX/
Try this, should wrap the whole lot in an anchor.
I'm not sure if its semantic but should work
$('.unique').after(
''+$('.unique').html()+''
).remove();
Demo
I am pretty new to jquery and am trying to code this where each time you click on the content, the content is added to an existing div. However, the content will be constantly changing. I tried making it a variable, but it is still not working. Any help or advice is appreciated.
js fiddle: http://jsfiddle.net/tU2En/7/
html:
<button id="Add">Add Text</button>
<div id="content">
<p>Content 1</p>
</div>
script:
var text='#content p';
$(function () {
$('#Add').on('click', function () {
$('text').appendTo('#content');
});
});
Change:
$('text').appendTo('#content');
to:
$(text).appendTo('#content');
By quoting text, you're treating it as a string and jQuery is looking for an element named text.
jsFiddle example
I have a page that contains multiple lines like this each wrapped within <div id="result">;
<div id="result">Link Name<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px" scrolling="no"></iframe></div>
I am currently using the following jQuery to display the <a> tag on hover;
$(document).ready(function(){
$('#result iframe').hover(function(){
$('#result a').fadeIn(200);
},function(){
$('#result a').fadeOut(200);
});
});
However, the hover only works on the first <div id="result"> and also shows the <a> tags for every <div id="result"> rather than just the one the user hovered on.
How can I fix this?
You can try this - Changing results to a class
$(document).ready(function(){
$('.result').hover(function(){ // <-- change to class.. and bind to wrapper div
$(this).find('a').fadeIn(200);
},function(){
$(this).find('a').fadeOut(200);
});
});
Assuming I understand your weird thing :
Html
<div class="result">
Link Name
<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
</div>
<div class="result">
Link Name
<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
</div>
jQuery
$('.result iframe').hover(function(e) {
$(this).parent().find('a').fadeIn();
}, function() {
$(this).parent().find('a').fadeOut();
});
See fiddle
Edit with hover.
Nb: e.preventDefault(); on click event if you don't want the link to submit by clicking.
Try it like this:
$(document).ready(function(){
$('#result iframe').hover(function(){
$('#result a').fadeIn(200);
$('#result a').fadeOut(200);
});
});
If you want to catch only the <a> tags not for every, but for a specific <div id="result">, you can try to specify that in your jQuery code, for example:
$(document).ready(function(){
$('#result:nth-child(1) iframe').hover(function(){
$('#result:nth-child(1) a').fadeIn(200);
},function(){
$('#result:nth-child(1) a').fadeOut(200);
});
});
So this will target only the first div with id="result". Catch the others by changing nth-child(0) - nth-child(1) - nth-child(2) ...
Another solution:
You can also set an id for every <a> tag or also, you can use a class to catch the specific element you need.