On page load I bind Event Handlers with content which is hidden on at the time of page load.
If users clicks on the button, the hidden content is pulled and replaces the main content of the page, Now the event Handlers which were initially binded do not work.
HTML code on Page load
<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
After the user clicks a button the new dom looks some thing like this
<p>
<div>Some Hidden content</div>
</p>
After the manipulation the event handlers binded to the div element do not work any more. Please notice that the div goes into the P element after DOM Manipulation.
jQuery Code:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later);
});
$(document).ready(function(){
$('.show-later').click(function(){
// Do something.....
});
});
You're not moving the <div>, you're just taking its content (a text node) and copying that to the paragraph. Contrary to what you've stated in the question, the resulting DOM will actually look like this:
<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
The <div> is still there, it still has content, and it still has the event handler for click bound to it; but it's also still hidden, so there's no way you can click on it.
I'd suggest that you actually move the <div> into the <p> element, like so:
$('.show-later').show().appendTo('p');
That will select the <div>, make it visible, and then move the element itself into the <p>.
have you tried to change your code like this?
$(document).ready(function(){
$(document).on('click', '.show-later', function(){
// Do something.....
});
});
Update2:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later).addClass('show-later');
});
Update1: I'm not sure, what your problem exactly is. Maybe you want to make a jsfiddle-example...
The 'on'-Method registers events so that even if you remove the element a make a new one, the events is already registered.
If you do
var show_later = $('.show-later').html();
$('p').html(show_later);
then no event handler bound to .show-later will become bound to the p. All you're doing is changing the contents of the p. I suggest changing the HTML as such:
<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>
and the javascript as such:
$('.show-later').show();
$('.hide-later').hide();
Related
My knowledge of javascript is close to none and I'm trying to have a div be replaced on click by another div.
<div class='replace-on-click'>
<h1>Click to Insert Coin</h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
I'd like it so when you click "Click to Insert Coin", that will disappear and make the .replaced-with div take its place, hopefully with some kind of fade transition if possible. How do I go about doing this?
We will make use of jQuery because it helps us to get you desired behavior done in a few statements. So first include jQuery from somewhere in your head part of your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Then somewhere include this Javascript code (e.g. create index.js and include it the way like the library code).
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});
It does the following: When your document is ready, it adds an event handler on h1 waiting for clicks. On click, it first fades out the h1 and when it's done, it fades the other element in.
In your HTML document, include the hidden attribute to the object that should be hidden initially.
<div class='replaced-with' hidden>
Here you can find it working as well: http://jsbin.com/cuqoquyeli/edit?html,js,console,output
I am trying to append body of the bootstrap modal dynamically. Here is the body Markup of the Modal.
<!-- try to indent the codes for readability -->
<div class="modal-body">
<div class="row text-left" style="margin-left: 2em;">
<div class="form-group"></div>
</div>
</div>
and here is the Jquery code to append the contents on click event of a button.
$('.form-group').append(EditHTML);
EditHTML is the markup that got generated dynamically. Now issue is that with every button click event EditHTML is being added with the previous content. I need to reset the Modal, each time button is click.Please help.
Just use .html()
$('.form-group').html(EditHTML);
Description : When .html() is used to set an element's content, any
content that was in that element is completely replaced by the new
content. Additionally, jQuery removes other constructs such as data
and event handlers from child elements before replacing those elements
with the new content.
I'm not sure I have understood right：
$('.form-group').html(EditHTML);
I have a working example here
http://enginiku.byethost17.com/stack.php
What I want is to copy the data to clipboard based on the block clicked. That works perfectly fine. However the problem is I need to click on the block, move cursor away from the block, click again and only then does the data gets copied. I understand that maybe it is because of the area turning into flash object.
But I want it to copy the data in one click only(the first time). Kindly suggest a way out !!
Here is my script
<script>
function copytocb(el){
var id = $(el).attr('id');
ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
var clip = new ZeroClipboard($('#'+id));
clip.on('complete',function(client,args){
alert('Copied');
});
}
</script>
And here is the relevant html
<div class="central">
<div class="maincontent">
<div class="leftcontent">
<span id="ss">Some text</span>
</div>
<div class="rightcontent">
<span id="block1" onclick="copytocb(this)" data-clipboard-text="Img1">Img</span>
<span id="block2" onclick="copytocb(this)" data-clipboard-text="Img2">Img</span>
<span id="block3" onclick="copytocb(this)" data-clipboard-text="Img3">Img</span>
<span id="block4" onclick="copytocb(this)" data-clipboard-text="Img4">Img</span>
<span id="block5" onclick="copytocb(this)" data-clipboard-text="Img5">Img</span>
</div>
</div>
</div>
Once the clip has been created and assigned to the span in question the click on it produces the desired result. Have you tried putting the contents of your copytocb() function in the on-document-ready section ($(function(){}))?
Edit:
$(document).ready(function() {
ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
var DOMarr=$('#rightcontent span').map(function(){return this;});
var clip = new ZeroClipboard(DOMarr);
clip.on('load',function(client,args){alert("Clipboard is ready for action.");});
})
Also: leave out the onclick="copytocb(this)" on the spans themselves. This should not be necessary since the overlaying flash movie will look for the click event itelf (hopefully).
Just tested this. Also look at the given examples of their page.
2. Edit:
The clipboard-texts can also be generated dynamically by setting an appropriate mouseoverevent on the underlying spans like
$('#rightcontent span').mouseover(function(){
var clip.setText($(this).text());
console.log(clip.options.text); // just to show the effect ...
});
I also tried using mousedown on the same elements but that did not work, because the clip-event will always be triggered before the mousedown event of the span.
I have a page so far with:
<div id="x1">Text paragraph 1<link here></div>
<div id="x2">Text paragraph 2<link here></div>
<div id="x3">Text paragraph 3<link here></div>
Where link here is like
google
What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.
So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying "x2".
So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.
like
$('#x1').onclick(function(){
alert('x1');
});
How can I do this better?
The page is generated with php so I could put the div id's anywhere in that text block area (even make a new div around the link if required)...
EDIT - Many good answers, I don't know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.
<div id='a1'>This text <a href="" onclick=tomato(1)>test</a>
</div>
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a>
</div>
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a>
</div>
and
function tomato(test){
alert(test);
};
Some of the others are incredibly interesting as they use higher functions. I'm going to spend the rest of the day looking into them. Thanks to all.
use jQuery's live or delegate functions:
$('div a').live('click', function(ev){
alert($(this).closest('div').attr('id'));
});
The benefit to the live/delegate functions is that there's actually only a single event on the entire page for this (as opposed to one event per link). If you add more links dynamically, this still works without having to attach more events.
The difference between live and delegate is that delegate is specific to a part of the page. If, for instance, you wrapped all of these DIVs in another div, the call would look like:
$('#wrapperDiv').delegate('a', 'click', function(ev){ ...
The advantage to this is that the internal jQuery code that checks to see if the click matches the selector only runs on clicks inside of #wrapperDiv instead of clicks anywhere on the page.
You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call
myfunction(2);
or is the number not the problem?
$('#x1, #x2, #x3').click(function(){
alert($(this).parents().attr("id"));
});
EDIT:
Better version:
HTML:
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
$('.x a').click(function(){
alert($(this).parents().attr("id"));
});
Have you considered using a class to name them all as opposed to explicit ids?
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
so then you would be able to use a single click event for all of them?
$(".x a").click()
{
//Use $(this) to refer to the clicked item.
alert($(this).parents().attr("id"));
});
$('.myDivs').click(function(){
alert($(this).parent().attr("id"));
});
Or select the divs in some other way:
$('#x1').parent().children('div').click(...);
Something along these lines should work:
<div id="x1">Text paragraph 1 <a href='google.com'>google.com</a></div>
<div id="x2">Text paragraph 2 <a href='google.com'>google.com</a></div>
<div id="x3">Text paragraph 3 <a href='google.com'>google.com</a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
$('a').click(function() {
alert($(this).parent().attr('id'))
return false
})
</script>
Add a class to each div, so you can select all of 'em at once.
<div id="x1" class="x">Text paragraph 1 <a>Click</a></div>
<div id="x2" class="x">Text paragraph 2 <a>Click</a></div>
<div id="x3" class="x">Text paragraph 3 <a>Click</a></div>
Then you can do:
$('div.x a').live('click', function(e){
e.preventDefault();
alert($(this).closest('div.x').attr('id'));
});
http://jsfiddle.net/VGh3X/1/
A better approach to this is to make all of the clickable areas share something in common that you can use as a selector. For example, if all of the clickable divs had class='click', you'd be able to select them all using $('.click') and bind to that.
$('.click a').bind('click', function() {
var div = this.closest('.click');
alert(div.attr('id'));
return false;
});
$(document).ready(function() {
var links = $("div[id^='x'] a"); //get the a tags
$.each(links, function(i,v) {
$(v).click(function() { //bind on click
alert(v.parentNode.id); //alert div id
return false; // stop
});
});
});
I have a wrapper box which has an onclick event to make the whole box cickable to go to a different page, something like this:
<div onclick="window.location='http://dom.com/page1/'">
<p>Title</p>
<img alt='img' />
<p>Some text</p>
My link
<p>Some more text</p>
</div>
The problem is that the child link will never go to page2 because the parent onclick takes priority and wherever you click on the box you will always end up in page1.
Is there any way to solve this, I need to be able to go to page1 when clicking anywhere on the box but going to page2 when clicking on the link.
The "onclick" handler is old-school. I'd recommend downloading and including jQuery in your HTML, then using it like so:
<script src="main.js"></script>
main.js:
jQuery( document ).ready(function(){
jQuery( "div" ).click( function( e ){
window.location='http://dom.com/page1/';
e.preventDefault();
};
} );
You probably don't need the e.preventDefault(); line, as you're changing the location of the browser before it executes.
Also, it's good practice to avoid applying click handlers to tags. Perhaps you should use two tags and CSS to properly position and layer to the two over-top each other.
You should look into event capturing and event bubbling. Here is a nice article to get you started.
One hack around it is to have anchor tag instead of div and make it block level element:
<a href="http://dom.com/page1/" style="display: block; text-decoration: none;">
<p>Title</p>
<img alt='img' />
...
</a>
This will also work when JS is disabled and the only downside is that it's not really elegant.