So I have nested DIVs and a simple version can be shown like this:
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function() {
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.
Any way to get around this?
It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function(e) {
e.stopPropogation();
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
You can deal with such cases easily by mentioning the target in an attribute like below.
$('#parent, #child').click(function() {
var target = $(this).data('target');
$('.'+target).modal('show');
// write code to hide others if necessary
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" data-target="parent">
<div id="child" data-target="child">
</div>
</div>
Try this before showing the modal:
$( '.modal' ).remove();
$( '.child' ).modal('show');
Remove the modal before using show. Hope this will fix your issue
Related
I am trying to create a jquery to click a hyperlink but nothing seems to be working.
HTML
<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
no avail
Show all
</div>
what I was trying
$(".warning a").click()
Any suggestions?
Note that jQuery-initiated "click" events will fire the event but will not cause navigation to occur.
Instead you can read the link's HREF attribute and directly set the window location:
// The click event:
$('a').on("click", function() {
console.log("Click event fired");
})
var demo1 = function() {
// This will trigger the click event, but will not navigate.
$(".warning a").click()
}
var demo2 = function() {
// This will navigate but will not trigger the click event. (If you need both to happen, trigger the click event first, and consider delaying the window location update if necessary.)
var url = $(".warning a").attr("href")
window.location = url;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
Show all
</div>
</div>
</main>
<!-- for demo: -->
<button onclick="demo1()">Won't work</button>
<button onclick="demo2()">Will work</button>
jQuery's .click() (without arguments) is a shortcut for .trigger("click"):
function(a,c) {
return arguments.length > 0 ? this.on(b, null, a, c) : this.trigger(b)
}
Therefore, it will not actually click the element, but just call the click event handlers attached to it, as you can see here:
const $link = $("a");
$link.on("click", () => {
console.log("Clicked? Not really...");
});
$link.click();
$link.trigger("click");
Show all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to get a reference to the actual DOM element and then call HTMLElement.click() on that:
$("a")[0].click();
Show all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can user the vanilla click method:
document.querySelector('.warning > a').click()
// equivalent jquery
//$('.warning > a')[0].click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warning" role="alert">
no avail
Show all
</div>
Whenever you select div class with hyperlink there you get array because you can have multiple hyperlinks so you need to add somthing like below
Code
$('.warning a')[0].click();
For reference link
Get working example for click event
If I need to redirect, I typically use window.location.href
window.location.href=$(".warning a").attr('href');
I have a function that assigns dynamic classes to my div's. This function is a that runs on the page. After the page loads, all 10 of my primary 's have classes ".info1" or ".info2" etc...
I am trying to write a Jquery function that changes the class of the div you click on, and only that one. Here is what I have attempted:
$(".info" + (i ++)).click(function(){
$(".redditPost").toggleClass("show")
});
I have also tried:
$(".info" + (1 + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
And
$(".info" + (i + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
EDITED MY HTML: DIV RedditPost is actually a sibling to Info's parent
<div class="listrow news">
<div class="newscontainer read">
<div class=".info1"></div>
<div class="redditThumbnail"></div>
<div class="articleheader read">
</div>
<div class="redditPost mediumtext"></div>
</div>
My issue is two fold.
The variable selection for ".info" 1 - 10 isn't working because i doesn't have a value.
If I did target the correct element it would change all ".redditPost" classes instead of just targeting the nearest div.
Try like this.
$("[class^='info']").click(funtion(){
$(this).parent().find('.redditPost').toggleClass("show");
});
Alternative:
$('.listrow').each(function(){
var trigger = $(this).find("[class^='info']");
var target = $(this).find('.redditPost');
trigger.click(function(){
target.toggleClass("show");
});
});
Try this
$("div[class*='info']").click(function(){
$(this).parent().find(".redditPost").toggleClass("show")
});
Explanation:
$("div[class*='info'])
Handles click for every div with a class containing the string 'info'
$(this).parent().find(".redditPost")
Gets the redditPost class of the current clicked div
Since the class attribute can have several classes separated by spaces, you want to use the .filter() method with a RegEx to narrow down the element selection as follows:
$('div[class*="info"]').filter(function() {
return /\binfo\d+\b/g.test( $(this).attr('class') );
}).on('click', function() {
$(this).siblings('.redditPost').toggleClass('show');
});
.show {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listrow news">
<div class="newscontainer read">
<div class="info1">1</div>
<div class="redditThumbnailinfo">2</div>
<div class="articleheader read">3</div>
<div class="redditPost mediumtext">4</div>
</div>
</div>
I have three similar sections. I want to select an element with a given class but only within the scope of the element I clicked.
My current code selects all the elements with the same class.
If I add an event handler on class mine, and some action needed to be done on target class, only for the inner2 within the scope of class one I clicked,
so how do i do it.
HTML:
<div class="one">
<div class="some">
<div class="mine"></div>
</div>
<div class="inner1">
</div>
<div class="inner2">
<div class="target"></div>
</div>
</div>
<div class="one">
<div class="some">
<div class="mine"></div>
</div>
<div class="inner1">
</div>
<div class="inner2">
<div class="target"></div>
</div>
</div>
Try this : you can make use of siblings() to get inner2 element and do your operation on it.
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});// end of slideToggle
}); //
use sibling
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});
});
demo
use below code . use find to search child element
$('.one').on('click',function(){
var inner2Obj = $(this).find('div.inner2');
inner2Obj.slideToggle(function(){
// your code
});
console.log(inner2Obj) // this will log inner2 object within clicked one DIV
});
You can also use .siblings() here:
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});// end of slideToggle
}); // end of click
I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/
Below is my jQuery:
$(".notificationfeedlist li").live('mouseleave', function() {
IF(NOT (MOUSE OVER AN ELEMENT WITH ID INFO))$('#info').hide();
});
And here is the HTML I am applying this jQuery to:
<div id="info">
<div class="arrow-right2"></div>
<div class="arrow-right"></div>
<div class="scrollerdiv"></div>
</div>
What should I replace IF(NOT (MOUSE OVER AN ELEMENT WITH ID INFO)) with to achieve hiding elements that do not have an ID of "info"?
$(".notificationfeedlist li").live('mouseleave',function(e){
if (e.target.id != "info") {
$('#info').hide();
};
});
You should change it to class="info" and then check with jQuery .hasClass();
Just trying to help: there are no lis in your code; just divs. That could be your problem.