I have a javascript link I want to open, but it is only working the second I click on it. I want to click a Div I have created for this, and there are no anchor tags involved.
The HTML I use:
<li>
<div class="artikel_box_lk">
<div class="button" rel="$productNameSeo">
<span>More Info >></span>
</div>
</div>
</li>
The javascript code I use for this:
$(function(){
$(".artikel_box_lk").click(function(e) {
if($(e.target).hasClass("button")) window.open("/lk/" + $(e.target).attr("rel"), "_blank");
return false;
});
});
So, the strange thing happening is that if I click on it a couple of times it sometimes works. I must have forgotten something crucial here, but cannot seem to find out.
Try to add .button to your click selector:
$(function(){
$( ".artikel_box_lk .button" ).click(function( e ) {
window.open( "/lk/" + $( this ).attr("rel"), "_blank");
});
});
I suppose first time you click outside .button div
It's because you say if the e.target has class name of "button"; that would only be true when you click in areas where the span element and its' parent don't overlap. When you click on the span element, it would say the "target" is the "span" element and it does not have the class name "button". Always do a console.log($(e.target)); to debug the issue.
Related
I am cloning a div and appending it to a parent div on different button click. this cloning and appending event is happening from different different JS files, so I want an event to be triggered when element is added to parent div. One method is to go and add the same code or call a function different places. I was wondering if there is an inbuilt function in jquery which will be triggered when any child is appended to it. Following is my code(Fiddle)
JS/Jquery:
$('.but').on('click',function(){
$('.sample').clone(true)
.removeClass('sample')
.addClass($(this).text())
.appendTo($('.parent'));
$('.rem').fadeIn();
});
$('.rem').on('click',function(){
$('.parent').children('.com:last-child').remove();
});
/*this is my conventional code this will be trigged every time when new element is added to parent div
if(elements are increased in parent div){
do your thing
}
*/
HTML:
<div class="button-wrp">
<div class="but cm">red</div>
<div class="but cm">green</div>
<div class="but cm">blue</div>
<div class="rem cm">Remove</div>
</div>
<div class="parent"></div>
<div class="sample com"></div>
If you want to see all this thing working, please click on fiddle link
You can use the jQuery event system. This would the idea:
First you set your listener:
$( 'div' ).on( 'child_appended', function(){
// this is your parent with a new child
var parent_with_new_child = this;
} );
And then when you append a new child you can to this:
$( '.parent' ).append( $( '.child' ) ).trigger( 'child_appended' );
For more reference go here
I have a list o elements li that becomes my image carousel. Each element is a thumbnail, and it becomes clickable using jQuery because i needed to put the image as li background-image. This I can not change. When thumb click, it calls a lightbox to show the image passed as bg parameter.
<ul id="piclist">
<li class="box" style="background-image: url('url_1');"><i class="seq" id="1"></i></li>
<li class="box" style="background-image: url('url_2');"></li>
<li class="box" style="background-image: url('url_3');"><i class="seq" id="2"></i></li>
<li class="box" style="background-image: url('url_4');"></li>
</lu>
The piece of my jQuery code to do this is:
<script type="text/javascript">
$('.box').click(function() {
return $(this).ekkoLightbox();
});
</script>
IT WORKS! But in some special cases, the thumbnail must show a kind of button, so I used a positioned <i></i> because of the Font Awesome im using in the project.
The image bellow can illustrate what im talking about:
THE PROBLEM IS:
When the li loads an i element, it also must be clickable, and its link must override his parents link - the container.
I did a piece of code in jQuery to do this, but always when I click on the i element button, the action loads the image lightbox from the li. Its wrong. It should do another action, for example, open an URL in new window, load another modal, whatelse.
<script type="text/javascript">
$('.box').click(function() {
return $(this).ekkoLightbox();
});
$('.seq').click(function() {
console.log($(this).attr("id")); //IT WORKS!
*do other action...* //Doesn´t work, open the <li> lightbox!
});
</script>
Any Help? :)
Change the $('.seq') click to this:
$('.seq').click(function(ev) {
ev.stopPropagation();
console.log($(this).attr("id")); //IT WORKS!
*do other action...* //Doesn´t work, open the <li> lightbox!
});
This will prevent the click event from bubbling up an triggering the click even of the i's parent (the li). Notice I added the event object as an argument and I'm calling the stopPropagation (http://api.jquery.com/event.stoppropagation/) method before doing anything else.
Check if e.target is identical to this:
<script type="text/javascript">
$('.box').click(function(e) {
if( e.target !== this ) return;
return $(this).ekkoLightbox();
});
$('.seq').click(function() {
console.log($(this).attr("id")); //IT WORKS!
*do other action...*
});
</script>
I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV
Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.
What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
});
</script>
HTML: (slightly simplified)
<div id="main_content">
</div>
<div id="right_side">
<div class="side_items">
<a href="content.html">
<img src="images/examplethumb.png" /><br />
Content</a>
</div>
</div>
Both scripts work independently to achieve their individual desired result.
This will do it:
$(document).ready(function(){
$(".side_items").click(function(){
$("#main_content").load($(this).find("a").attr("href"));
return false;
})
});
Breaking it down:
$(".side_items").click(fn);
Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.
$(this).find("a").attr("href")
Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.
$("#main_content").load(href);
Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.
I think your issue is that you're trying to assign the $().ready(..) handler twice.
Try combing scripts like this
<script type="text/javascript">
var change_location = function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
}
var load_location = function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
}
$().ready(function(){
change_location();
load_function();
});
</script>
Hope that helps
i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus
Try using the onblur event.
I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.
I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div
Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"
I have a LI with some information, including some links. I would like jQuery to make the LI clickable, but also remain the links in the LI.
The Clickable part works. I just need the links within to work as well.
NOTE: They work if you right click and choose "Open in new tab".
HTML
<ul id="onskeliste">
<li url="http://www.dr.dk">Some info with links Imerco</a>
</ul>
jQuery
$(document).ready(function() {
$("#onskeliste li").click(
function()
{
window.location = $(this).attr("url");
return false;
});
})(jQuery);
I've found a simular question here, but it doesn't seem to solve my problem.
jQuery DIV click, with anchors
Can you help me?? :-)
Thank you in advance...
Use the event target, like:
$("#onskeliste li").bind('click', function(e){
switch(e.target.nodeName){
case 'LI':{
e.preventDefault();
e.stopPropagation();
window.location = $(e.target).attr('url');
break;
}
case 'A':{
// do something
break;
}
}
});
The problem your having is caused by event propagation.
The click on the <a/> tag bubbles up to the <li/> tag, therefore causing the li's click event to "overrule" the link's click.
Essentially, the li's click happens immediately after the clicking on the link. It's like you've clicked on a link to one site, and then clicked a link to a different site before the browser had a chance to change the page.
A solution to this would be to stop the event from bubbling up to the <li/>, thus preventing it from changing the window's location.
I suggest using event.stopPropagation() on the <a/> tag, like this:
$('#onskeliste li a').click(function(e) {
e.stopPropagation();
});
Can you just change the mark up to this and not write js for this?
<ul id="onskeliste">
<li>
Some info with links
Imerco</a>
</li>
</ul>
As #GeReV said, it's event propagation.
$(document).ready(function() {
$('#onskeliste li').click(function(e) {
if ($(e.target).is(':not(a)')) {
window.location = $(this).attr('url');
return false;
}
});
})(jQuery);
This looks at what you clicked and if it's not a link it looks at the url attribute on the list element. If it is a link it does its normal link thing.